如何解决babel-plugin-lodash不支持Lodash链式序列的问题

方法1：用函数式组合替代链式调用 #

放弃_.chain，改用_.flow或_.flowRight（别名_.compose）组合方法，babel-plugin-lodash能完美处理这种写法，同时保留tree-shaking效果：

原链式写法：

_.chain(userList)
  .filter(u => u.age > 18)
  .map(u => u.username)
  .sort()
  .value();

改写为函数式组合：

import { flow, filter, map, sort } from 'lodash';

const processUsers = flow(
  filter(u => u.age > 18),
  map(u => u.username),
  sort
);

const result = processUsers(userList);

方法2：手动导入链式模块（不推荐，会增加体积） #

如果必须保留链式写法，可以直接导入lodash/chain或完整Lodash库，绕过babel-plugin-lodash的按需导入：

// 仅导入链式相关模块
import _ from 'lodash/chain';

_.chain(userList)
  .filter(u => u.age > 18)
  .map(u => u.username)
  .value();

这种方式会引入更多未使用的Lodash代码，导致打包体积增大，仅适合对体积不敏感的场景。

方法3：切换到lodash/fp模块 #

lodash/fp是Lodash的函数式编程版本，其链式调用支持自动柯里化，且babel-plugin-lodash能正确识别并做tree-shaking：

import _ from 'lodash/fp';

// fp的链式无需调用value()，直接传入数据即可
const result = _.filter(u => u.age > 18)
  .map(u => u.username)
  .sort()(userList);

// 或者使用fp的chain（行为与原版略有不同，需注意）
const result = _.chain(userList)
  .filter(u => u.age > 18)
  .map(u => u.username)
  .sort()
  .value();

原因说明 #

babel-plugin-lodash的核心是静态分析代码，按需导入单个Lodash方法以减小体积，但_.chain会创建一个包装对象，插件无法静态分析对象上调用的后续方法，因此无法拆分导入，导致不支持链式序列。

内容的提问来源于stack exchange，提问作者nsharma98