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

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

웹 팩을 사용하여 다음과 같이 가져오려고 합니다.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

ECMA스크립트 5 및 공통을 사용하는 경우그런 다음 JS 모듈을 다음과 같이 가져옵니다.

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 설명서

에는 가온를후다을(수) 사있니다습용할(음) 져▁the다있니▁use를 사용할 수 있습니다.isEqual사용자 코드에서 기능합니다.로 이이지개일아부닙다니라는 이름의 ._이런 식으로 수입하면, 당신은 그것을 참조하지 않습니다._.isEqual단, 직으로와 직접적으로isEqual.

대안:사용.lodash-es

@kimamula가 지적한 바와 같이:

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

import { isEqual } from 'lodash-es';

이것은 웹팩 4가 sideEffects 플래그와lodash-es4.17.7 이상같다설이포플정다로 설정됨)가됩니다.false).

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

import isEqual from 'lodash/isequal';

이 방법도 효과가 있지만 다음과 같은 두 가지 작은 단점이 있습니다.

• 당신은 전체 lodash 패키지를 설치해야 합니다.npm install --save lodash), 작은 개별 lodash.is는 동일한 패키지일 뿐만 아니라, 스토리지 공간이 저렴하고 CPU가 빠르기 때문에 이에 대해 신경 쓰지 않을 수 있습니다.
• 웹팩과 같은 도구를 사용할 때의 결과 번들은 약간 더 클 것입니다. 저는 번들 크기가 최소한의 코드 예제를 가진다는 것을 발견했습니다.isEqual으로 28더 3Uglify , 사용 유무). 28% 더 큽니다.

만약 당신이 단지 포함하고 싶다면.isEqual 리고나는아닙다니지머그▁the▁of▁the▁rest▁and▁not다니닙아.lodash하는 데 ES6;(으)로 이 작업을 할 수 .

import isEqual from 'lodash/isEqual'

이는 README에 설명된 내용과 거의 동일하지만 사용자가 사용하는 것을 제외하고는require()파일

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

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

import { isEqual } from 'lodash-es';

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

편집

버전 1.9.0부터 Parcel은 다음을 지원합니다.import { isEqual } from 'lodash-es';또한 Parcel을 사용하여 트리가 흔들립니다.

웹팩과 관련은 없지만 현재 많은 사람들이 타자기로 이동하고 있기 때문에 여기에 추가하겠습니다.

다▁youash▁▁a▁▁function니를 사용하여 lodash에서 단일 함수를 가져올 수도 .import isEqual from 'lodash/isEqual';로 타이프스크립트를 합니다.esModuleInterop options (tsconfig는 컴파일러 옵션(tsconfig.json)입니다.

예

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

적어도 2020년 6월 현재 이 질문에 답하기 위해 방법별 패키지에 대한 lodash 설명서에 주목할 가치가 있다고 생각합니다.

Lodash 메서드는 lodash.mapvalues, lodash.pickby 등과 같은 메서드 패키지별로 독립 실행형으로 제공됩니다.이러한 패키지에는 메서드가 종속된 코드만 포함되어 있습니다.

그러나 이러한 패키지는 사용하지 않으며 v5에서 제거됩니다.

더 가벼워 보일 수도 있지만 일반적으로 method당 여러 패키지 및/또는 메인 lodash 패키지에 과도적으로 의존하는 프로젝트에서 node_modules 및 webpack/rollup 번들의 크기를 늘립니다.주 lodash 패키지의 많은 메소드는 코드를 공유하지만 메소드별 패키지는 종속된 모든 코드의 복사본을 내부적으로 번들합니다.

문서는 실제로 다음을 권장합니다.

예를 들어 메소드를 직접 가져오거나 필요한 경우에는 걱정할 필요가 없습니다.const throttle = require('lodash/throttle')패키지를 사용하는 프로젝트에는 패키지에서 사용하는 lodash 코드의 하위 집합만 번들됩니다.

또한 이 페이지에는 다양한 가져오기 옵션과 결과 빌드 크기에 대한 꽤 흥미로운 연구가 있습니다. https://www.blazemeter.com/blog/the-correct-way-to-import-lodash-libraries-a-benchmark

슬래시를 사용하는 것이 가장 좋습니다.

import isEqual from 'lodash/isEqual'  //or equivalent

한때는 기능별로 점선이 있는 패키지가 정답이었을 수도 있지만, 이제는 사용이 중단되고 제거될 것입니다.

또한 루카스가 말한 것과 같이, 그것은import {isEqual} from 'lodash'모든 lib를 가져온 다음 하나의 함수를 현재 범위로 추출하기 때문입니다.

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

• 바벨로다쉬

  • 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 및 웹 팩 플러그인 설치:

  $ 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-es';전체 라이브러리를 가져오는 중입니다.나는 기본적으로 트리 쉐이킹을 하는 롤업을 사용하고 있습니다.

제가 직접 모듈을 작성할 때마다 이 이름이 붙은 가져오기 구문이 작동하고 롤업이 트리 셰이크에 성공적으로 이루어지는데, 왜 Lodash와 함께 작동하지 않는지 약간 혼란스럽습니다.

대부분의 메소드에는 자체 패키지가 있습니다.관련 패키지/방법을 설치합니다.

npm i -S lodash.debounce
npm i -D @types/lodash.debounce

그럼 메소드만 가져와서 사용하세요.

import debounce from 'lodash.debounce';

debounce(() => { ...

https://www.npmjs.com/package/lodash.debounce 도 참조하십시오.

브라우저에서 REPL을 사용하는 경우(예: Chrome dev 도구 또는 Deno) IDE, 바벨 또는 도구를 사용하지 않고 신속하게 테스트하기만 하면 되는 경우, 다음과 같은 방법으로 CORS 제한이 없는 한 거의 모든 웹 사이트에서 하나 이상의 lodash 기능을 가져올 수 있습니다.

(arr => Promise.all(arr.map(_ =>
  import ('https://cdn.skypack.dev/lodash.' + _))).then(_ => _[0].default(arr, _.map(d => d.default))))(
  ["zip", "unzip", "groupby", "mapvalues"])
  .then(_ => Object.fromEntries(_)).then(_ => {
  //you can use _ with zip, unzip, groupby, and mapvalues
  console.log(Object.keys(_))
})

이것은 실제로 나에게 효과가 있었습니다.

import { isEqual } from 'lodash';

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