webpack - 使用 browserify/rollup/webpack 为较小的构建加载单个 lodash 方法

Question

来自 https://lodash.com/ :

// Load a single method for smaller builds with browserify/rollup/webpack.
var chunk = require('lodash/chunk');
var extend = require('lodash/fp/extend');

这适用于大多数方法: each , map , isArray等。我无法使用的一种方法是 lodash/chain .

我导入整个 lodash 库的当前代码如下所示:

_.chain(items)
  .filter(...)
  .groupBy(...)
  .map(...)
  .concat(...)
  .value();

创建不包含 lodash 构建中包含的所有方法的适当可链接对象的正确方法是什么？ chain方法创建一个 lodash 包装对象并返回它。我可以像这样创建自己的链方法

var lodash = require('lodash/wrapperLodash');
var filter = require('lodash/filter');
var map = require('lodash/map');

function chain(value) {
  var result = lodash(value);
  result.__chain__ = true;
  result.filter = filter
  result.map = map;
  return result;
}

module.exports = chain;

现在调用 chain将能够执行 filter和 map .不幸的是， chain().filter 的结果不会有我在原始链中附加的方法。创建自定义可链接 lodash 对象的正确方法是什么？

Answer 1

对此有不同的解决方案，尽管并非所有解决方案都保留了链功能。

Lodash 自定义构建(保持链)

使用https://lodash.com/custom-builds使用您的自定义方法。它将使用您需要的方法生成一个 lodash 构建。我过去发现这个解决方案的问题是，即使导入了一些方法，构建的大小还是相当高的，因为它需要整个 lodash 函数来包装你的数据才能使用链.

只导入你需要的函数(无链)

大多数 lodash 函数在 npm ( example pick ) 中作为独立包提供，因此您可以单独导入它们。但是，您不会使用此解决方案获得链。

从 lodash src 导入函数(无链)

另一种解决方案是从完整的 lodash 模块中导入特定的函数，因此任何捆绑器只会使用该函数及其依赖项而不是整个 lodash，例如:

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

建议:不要使用链

尽管您特别要求使用链，但我想劝阻您不要使用它，因为它是一种糟糕的函数式编程实践。查看 this blog article (正如您在第一条评论中提到的那样)对为什么最好不要使用链以及如何摆脱它进行了非常彻底的解释。