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

단일 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) 가 포함 되기 때문 입니다.

편집하다

As of version 1.9.0, Parcel also supports "sideEffects": false, threrefore import { isEqual } from 'lodash-es'; is also tree shakable with Parcel.

---

Not related to webpack but I'll add it here as a lot of people are currently moving to typescript.

You can also import a single function from lodash using import isEqual from 'lodash/isEqual'; in typescript with the esModuleInterop flag in the compiler options (tsconfig.json)

example

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

---

Lodash lists a couple of options in their README:

• babel-plugin-lodash

  • Install lodash and the babel plugin:

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

  • Add this to your .babelrc

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

  • Transforms this

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

  Roughly to this:

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

• lodash-webpack-plugin

  • Install lodash and webpack plugin:

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

  • Configure your 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 using the lodash cli

  • $ lodash modularize exports=es -o ./

---

this actually worked for me

import { isEqual } from 'lodash';

---

import { isEqual } from 'lodash-es'; is importing the entire library. I am using Rollup which should do tree shaking by default.

Whenever I've written my own modules, this named import syntax works and Rollup successfully tree shakes, so I'm a bit confused as to why it won't work with Lodash.

참고URL : https://stackoverflow.com/questions/43479464/how-to-import-a-single-lodash-function