웹 팩 은 필요 에 따라 Lodash 를 포장 하 는 몇 가지 방법 에 대한 상세 한 설명 을 실현 합 니 다.

머리말
데이터 조작 을 할 때 Lodash 는 바로 나의 탄약 창고 로 아무리 복잡 한 데이터 구 조 를 만 나 더 라 도 일부 함수 로 쉽게 분해 할 수 있다.
ES6 에 도 새로운 대상 함수 가 많이 추가 되 었 습 니 다.일부 간단 한 항목 에서 ES6 는 충분히 사용 할 수 있 지만 예외 적 인 상황 에서 소수의 Lodash 함 수 를 인용 할 수 있 습 니 다.압축 된 후에 도 현재 최신 버 전 은 71k 의 부피 가 있 는 완전한 Lodash 라 이브 러 리밥 한 입 먹 으 려 고 다음 식당 살 순 없 잖 아.
이 문제 에 대하 여 사실 이미 많은 선택 방안 이 있다.
함수 모듈
Lodash 의 모든 함 수 는 NPM 에 하나의 단독 발표 모듈 이 있 습 니 다.NPM: results for ‘lodash'
만약 당신 이 사용 하기 만 한다 면...isEqual,그러면 모듈lodash.isequal을 설치 하고 다음 과 같은 방식 으로 참조 하 십시오.

var isEqual = require('lodash.isequal')
// or ES6
import isEqual from 'lodash.isequal'
isEqual([1, 2, 3], [1, 2, 3]) // true

전체 경로 참조
Lodash 를 완전히 설치 한 후 lodash/함수 이름 의 형식 에 따라 필요 한 함수 모듈 을 따로 도입 할 수 있 습 니 다.

var difference = require('lodash/difference')
// or ES6
import difference from 'lodash/difference'
difference([1, 2], [1, 3]) // [2]

플러그 인 사용 최적화
간단 한 장면 에서 상기 두 가지 방식 은 문 제 를 해결 하기에 충분 하 다.
복잡 한 데이터 대상 을 만 났 을 때,우 리 는 한 파일 에 여러 개의 Lodash 함 수 를 도입 해 야 한다.그러면 파일 에 여러 개의 require 나 import 관련 함 수 를 써 야 한다.

import remove from 'lodash/remove'
import uniq from 'lodash/uniq'
import invokeMap from 'lodash/invokeMap'
import sortBy from 'lodash/sortBy'
// more...

관건 적 인 부분 에 쓰 고 있 는데 함 수 를 도입 하여 파일 머리 로 끌 어 당 겨 인용 을 정의 해 야 하기 때문에 생각 을 어 지 럽 히 고 불쾌 합 니 다!
그래서 저 는 지혜 롭 게 Github 에 가서 웹 팩 과 lodash 두 키워드 의 조합 을 검 색 했 습 니 다.1 위lodash-webpack-plugin는 바로 이 문 제 를 해결 하기 위해 태 어 났 습 니 다.
사용 할 때 다음 과 같은 모듈 이 필요 합 니 다.사실은 앞의 두 개 를 제외 하고 나머지 는 모두 설치 되 어 있 습 니 다.

$ npm i -S lodash-webpack-plugin babel-plugin-lodash babel-core babel-loader babel-preset-es2015 webpack

설정:

webpack.config.js
var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
var webpack = require('webpack');
module.exports = {
 module: {
 loaders: [{
 loader: 'babel',
 test: /\.js$/,
 exclude: /node_modules/,
 query: {
 plugins: ['transform-runtime', 'lodash'],
 presets: ['es2015']
 }
 }]
 },
 plugins: [
 new LodashModuleReplacementPlugin,
 new webpack.optimize.OccurrenceOrderPlugin,
 new webpack.optimize.UglifyJsPlugin
 ]
}

그 중에서 babel-plugin-lodash 의 설정,즉plugins: ['lodash'] 은 반드시 loaders 에서 만 정 의 될 수 있 는 것 이 아니 라 babel 을 따로 정의 할 수 있 습 니 다.

webpack.config.js
var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
var webpack = require('webpack');
module.exports = {
 module: {
 loaders: [{
 loader: 'babel',
 test: /\.js$/,
 exclude: /node_modules/
 }]
 },
 babel: {
 presets: ['es2015'],
 plugins: ['transform-runtime', 'lodash']
 },
 plugins: [
 new LodashModuleReplacementPlugin,
 new webpack.optimize.OccurrenceOrderPlugin,
 new webpack.optimize.UglifyJsPlugin
 ]
}

아니면...babelrc 파일 에서...
이상 작업 이 완료 되 었 습 니 다.lodash 함 수 를 사용 해 야 하 는 모든 파일 에서 lodash 를 한 번 만 참조 하면 모든 함 수 를 호출 할 수 있 습 니 다.

import _ from 'lodash'
_.add(1, 2) //               

메모:ES 2015 모듈 참조 방식 을 사용 해 야 유효 합 니 다.
이상 은 제 가 현재 알 고 있 는 몇 가지 방식 입 니 다.만약 에 어떤 친구 가 더 좋 은 방법(예 를 들 어 전체 국면 에서 한 번 만 도입 해 야 합 니 다)이 있다 면 저 와 꼭 공유 하 세 요!
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.