단일 Lodash 함수를 가져 오는 방법?

webpack을 사용하여 모든 것을 가져 오는 것처럼 보이기 때문에 isEqual 을 가져 오려고 lodash합니다. 성공하지 못한 채 다음을 시도했습니다.

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'

다음 과 같이 lodash.isequal전체 lodash 패키지 를 설치하지 않고 단일 모듈로 설치할 수 있습니다 .

npm install --save lodash.isequal

ECMAScript 5 및 CommonJS 모듈을 사용하는 경우 다음과 같이 가져옵니다.

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

ES6 모듈을 사용하면 다음과 같습니다.

import isEqual from 'lodash.isequal';

코드에서 사용할 수 있습니다.

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

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

출처 : Lodash 문서

가져온 후 isEqual코드 에서 함수를 사용할 수 있습니다 . 그것이라는 개체의 일부가 아닙니다 _당신은, 그래서이 방법을 가져 오면 하지 않는 그것을 참조하는 _.isEqual직접,하지만 isEqual.

대안 : 사용 lodash-es

@kimamula가 지적 했듯이 :

webpack 4 및 lodash-es 4.17.7 이상에서는이 코드가 작동합니다.

import { isEqual } from 'lodash-es';

이는 webpack 4가 sideEffects 플래그를 지원하고 4.17.7lodash-es 이상이 플래그 (로 설정 됨 false)를 포함하기 때문입니다.

슬래시가있는 버전을 사용하지 않는 이유는 무엇입니까? 이 질문에 대한 다른 답변은 다음과 같이 점 대신 대시를 사용할 수도 있음을 제안합니다.

import isEqual from 'lodash/isequal';

이것도 작동하지만 두 가지 사소한 단점이 있습니다.

• 작은 별도의 lodash.isequal 패키지 뿐만 아니라 전체 lodash 패키지 ( npm install --save lodash) 를 설치해야합니다 . 저장 공간이 저렴하고 CPU가 빠르기 때문에 신경 쓰지 않을 수도 있습니다.
• 웹팩과 같은 도구를 사용할 때 생성되는 번들은 약간 더 커집니다. 최소한의 코드 예제가 포함 된 번들 크기가 isEqual평균 28 % 더 큽니다 (웹팩 2 및 웹팩 3, Babel 유무, Uglify 유무에 관계 없음).

isEqual나머지 lodash함수 는 포함 하지 않고 포함 하고 싶다면 (번들 크기를 작게 유지하는 데 유용) ES6에서이를 수행 할 수 있습니다.

import isEqual from 'lodash/isEqual'

이것은 구문 을 사용한다는 점을 제외 하면 lodashREADME에 설명 된 것과 거의 동일 require()합니다.

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

webpack 4 및 lodash-es 4.17.7 이상에서는이 코드가 작동합니다.

import { isEqual } from 'lodash-es';

이는 webpack 4가 sideEffects플래그를 지원 하고 lodash-es 4.17.7 이상에 플래그 (로 설정 됨 false) 가 포함 되기 때문 입니다.

편집하다

버전 1.9.0부터 Parcel"sideEffects": false 은를 지원하며 , import { isEqual } from 'lodash-es';Parcel과 함께 트리 흔들림 도 가능합니다 .

webpack과 관련이 없지만 많은 사람들이 현재 typescript로 이동하고 있으므로 여기에 추가하겠습니다.

import isEqual from 'lodash/isEqual';in typescript를 사용하여 lodash에서 단일 함수를 가져올 수도 있습니다 .esModuleInterop컴파일러 옵션 (tsconfig.json) 플래그 있습니다.

예

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

Lodash는 README 에 몇 가지 옵션을 나열합니다 .

• babel-plugin-lodash

  • lodash 및 babel 플러그인을 설치합니다.

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

  • 이것을 당신의 .babelrc

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

  • 이것을 변형

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

  대략 이것에 :

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

• lodash-webpack-plugin

  • lodash 및 webpack 플러그인을 설치합니다.

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

  • 구성 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 cli를 사용하는 lodash-es

  • $ lodash modularize exports=es -o ./

이것은 실제로 나를 위해 일했습니다.

import { isEqual } from 'lodash';

import { isEqual } from 'lodash-es';전체 라이브러리를 가져 오는 중입니다. 기본적으로 트리 쉐이킹을 수행해야하는 Rollup을 사용하고 있습니다.

내 자신의 모듈을 작성할 때마다이 명명 된 가져 오기 구문이 작동하고 Rollup이 성공적으로 트리 흔들기 때문에 Lodash에서 작동하지 않는 이유에 대해 약간 혼란 스럽습니다.