Làm thế nào để nhập một hàm duy nhất?

Sử dụng webpack, tôi đang cố gắng nhập isEqual vì lodashdường như đang nhập mọi thứ. Tôi đã thử làm những điều sau đây nhưng không thành công:

import { isEqual } from 'lodash'

import isEqual from 'lodash/lang'

import isEqual from 'lodash/lang/isEqual'

import { isEqual } from 'lodash/lang'

import { isEqual } from 'lodash/lang'

Bạn có thể cài đặt lodash.isequaldưới dạng một mô-đun duy nhất mà không cần cài đặt toàn bộ gói lodash như vậy:

npm install --save lodash.isequal

Khi sử dụng các mô-đun ECMAScript 5 và CommonJS, sau đó bạn nhập nó như thế này:

var isEqual = require('lodash.isequal');

Sử dụng các mô-đun ES6, điều này sẽ là:

import isEqual from 'lodash.isequal';

Và bạn có thể sử dụng nó trong mã của bạn:

const obj1 = {username: 'peter'};
const obj2 = {username: 'peter'};
const obj3 = {username: 'gregory'};

isEqual(obj1, obj2) // returns true
isEqual(obj1, obj3) // returns false

Nguồn: Tài liệu của Lodash

Sau khi nhập, bạn có thể sử dụng isEqualhàm trong mã của mình. Lưu ý rằng nó không phải là một phần của đối tượng được đặt tên _nếu bạn nhập nó theo cách này, vì vậy bạn không tham chiếu nó với _.isEqual, nhưng trực tiếp với isEqual.

Thay thế: Sử dụng lodash-es

Như được chỉ ra bởi @kimamula :

Với webpack 4 và lodash-es 4.17.7 trở lên, mã này hoạt động.

import { isEqual } from 'lodash-es';

Điều này là do webpack 4 hỗ trợ các dụng phụ cờ và lodash-es4.17.7 và cao hơn bao gồm các cờ (được thiết lập để false).

Tại sao không sử dụng phiên bản với dấu gạch chéo? Các câu trả lời khác cho câu hỏi này cho thấy rằng bạn cũng có thể sử dụng dấu gạch ngang thay vì dấu chấm, như vậy:

import isEqual from 'lodash/isequal';

Điều này cũng hoạt động, nhưng có hai nhược điểm nhỏ:

• Bạn phải cài đặt toàn bộ gói lodash ( npm install --save lodash), không chỉ gói lodash.isequal riêng biệt nhỏ ; dung lượng lưu trữ rẻ và CPU nhanh, vì vậy bạn có thể không quan tâm đến điều này
• Gói kết quả khi sử dụng các công cụ như webpack sẽ lớn hơn một chút; Tôi phát hiện ra rằng các kích thước gói với ví dụ mã tối thiểu isEqualtrung bình lớn hơn 28% (đã thử webpack 2 và webpack 3, có hoặc không có Babel, có hoặc không có Uglify)

Nếu bạn chỉ muốn bao gồm isEqualvà không bao gồm các lodashchức năng còn lại (hữu ích để giữ kích thước gói của bạn nhỏ), bạn có thể thực hiện việc này trong ES6;

import isEqual from 'lodash/isEqual'

Đây là khá nhiều giống như những gì được mô tả trong các lodashREADME , ngoại trừ việc có họ sử dụng require()cú pháp.

var at = require('lodash/at');

Với webpack 4 và lodash-es 4.17.7 trở lên, mã này hoạt động.

import { isEqual } from 'lodash-es';

Điều này là do webpack 4 hỗ trợ sideEffectscờ và lodash-es 4.17.7 trở lên bao gồm cờ (được đặt thành false).

Biên tập

Kể từ phiên bản 1.9.0, Parcel cũng hỗ trợ"sideEffects": false , threrefor import { isEqual } from 'lodash-es';cũng có thể chuyển đổi được với Parcel.

Không liên quan đến gói web nhưng tôi sẽ thêm nó ở đây vì nhiều người hiện đang chuyển sang bản đánh máy.

Bạn cũng có thể nhập một hàm duy nhất từ ​​lodash bằng cách sử dụng import isEqual from 'lodash/isEqual';bản in với esModuleInteropcờ trong các tùy chọn trình biên dịch (tsconfig.json)

thí dụ

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    ...
  }
}

Lodash liệt kê một vài tùy chọn trong README của họ :

• babel-plugin-lodash

  • Cài đặt lodash và plugin babel:

  $ npm i --save lodash
  $ npm i --save-dev babel-plugin-lodash @babel/cli @babel/preset-env

  • Thêm cái này vào .babelrc

  {
    "plugins": ["lodash"],
    "presets": [["@babel/env", { "targets": { "node": 6 } }]]
  }

  • Biến đổi điều này

  import _ from 'lodash'
  import { add } from 'lodash/fp'
  
  const addOne = add(1)
  _.map([1, 2, 3], addOne)

  Roughly này:

  import _add from 'lodash/fp/add'
  import _map from 'lodash/map'
  
  const addOne = _add(1)
  _map([1, 2, 3], addOne)

• lodash-webpack-plugin

  • Cài đặt plugin lodash và webpack:

  $ npm i --save lodash
  $ npm i --save-dev lodash-webpack-plugin babel-core babel-loader babel-plugin-lodash babel-preset-env webpack

  • Định cấu hình webpack.config.js:

  var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
  var webpack = require('webpack');
  
  module.exports = {
    'module': {
      'rules': [{
        'use': 'babel-loader',
        'test': /\.js$/,
        'exclude': /node_modules/,
        'options': {
          'plugins': ['lodash'],
          'presets': [['env', { 'modules': false, 'targets': { 'node': 4 } }]]
        }
      }]
    },
    'plugins': [
      new LodashModuleReplacementPlugin,
      new webpack.optimize.UglifyJsPlugin
    ]
  };

• lodash-es sử dụng clod lodash

  • $ lodash modularize exports=es -o ./

điều này thực sự làm việc cho tôi

import { isEqual } from 'lodash';

import { isEqual } from 'lodash-es';đang nhập toàn bộ thư viện. Tôi đang sử dụng Rollup nên làm rung cây theo mặc định.

Bất cứ khi nào tôi viết các mô-đun của riêng mình, cú pháp nhập có tên này hoạt động và Rollup cây rung chuyển thành công, vì vậy tôi hơi bối rối về lý do tại sao nó không hoạt động với Lodash.