javascript - 如何在支持 tree shaking 的同时使用 `chain` 和 `lodash-es`？

Question

众所周知，lodash-es使用更模块化的语法构建，以通过构建工具支持 tree shaking。

但是，chain 相关的功能意味着一些功能附加到对象/原型(prototype)链。

我可以看到 chain 是用 lodash-es 发布的，但我不确定如何通过其他链接方法正确导入它。

用例可能如下所示:

import { chain } from 'lodash-es'

export function double(input) {
    return chain(input)
        .without(null)
        .map(val => val * 2)
        .value()
        .join(', ')
}

编辑#1:

重点不在于如何导入chain，而在于如何导入其他chain函数。

Answer 1

编辑:正如 Snook 所指出的，已经有关于 a github issue 的工作。关于这个问题。所以我把这个添加到我的答案中。转到 Flow solution 以获取上一个答案(恕我直言，这很好)。

自定义链解决方案

import map from 'lodash-es/map';
import filter from 'lodash-es/filter';
import mapValues from 'lodash-es/mapValues';
import toPairs from 'lodash-es/toPairs';
import orderBy from 'lodash-es/orderBy';
import groupBy from 'lodash-es/groupBy';
import sortBy from 'lodash-es/sortBy';

// just add here the lodash functions you want to support
const chainableFunctions = {
  map,
  filter,
  toPairs,
  orderBy,
  groupBy,
  sortBy,
};

export const chain = (input) => {
  let value = input;
  const wrapper = {
    ...mapValues(
      chainableFunctions,
      (f) => (...args) => {
        // lodash always puts input as the first argument
        value = f(value, ...args);
        return wrapper;
      },
    ),
    value: () => value,
  };
  return wrapper;
};

lodash/lodash#3298 还有一个 TypeScript 版本可用.

流动解决方案

你不能，chain 需要捆绑所有(或大部分)lodash 的功能。

您可以使用 flow尽管。这是一个转换它的例子:

import _ from "lodash";

_.chain([1, 2, 3])
 .map(x => [x, x*2])
 .flatten()
 .sort()
 .value();

进入这个:

import map from "lodash/fp/map";
import flatten from "lodash/fp/flatten";
import sortBy from "lodash/fp/sortBy";
import flow from "lodash/fp/flow";

flow(
    map(x => [x, x*2]),
    flatten,
    sortBy(x => x) 
)([1,2,3]);

此示例(及更多)来自 this article .