npm lodash

Posted 2020-09-30 勤奋的搬运工

在数据操作时，Lodash 就是我的弹药库，不管遇到多复杂的数据结构都能用一些函数轻松拆解。

ES6 中也新增了诸多新的对象函数，一些简单的项目中 ES6 就足够使用了，但还是会有例外的情况引用了少数的 Lodash 函数。一个完整的 Lodash 库，即使是压缩后，现最新版本也有 71k的体积。不能为了吃一口饭而买下一个饭店啊。

针对这个问题，其实已经有很多可选方案了。

函数模块

Lodash 中的每个函数在 NPM 都有一个单独的发布模块。 NPM: results for ‘lodash’

假如你只需要使用 _.isEqual，那么你只需要安装 lodash.isequal模块，然后按以下方式引用。

var isEqual = require(‘lodash.isequal‘)// or ES6import isEqual from ‘lodash.isequal‘isEqual([1, 2, 3], [1, 2, 3]) // true全路径引用

在你完整安装 Lodash 后，可以按 lodash/函数名的格式单独引入需要的函数模块。

var difference = require(‘lodash/difference‘)// or ES6import 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 去搜索了 webpack和 lodash两个关键词的组合，排在首位的 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,newwebpack.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,newwebpack.optimize.OccurrenceOrderPlugin,new webpack.optimize.UglifyJsPlugin]}

又或者是 .babelrc文件中。

以上工作完成了，在每个你需要使用 lodash 函数的文件中只需要引用一次 lodash，即可调用任意函数而不会造成完全打包。

import _ from ‘lodash‘_.add(1, 2) // 打包时只会引入这一个函数模块