如何在TypeScript工具库中正确导入Lodash？

问题根源 #

Lodash 4.x的主包采用CommonJS格式编写，并未提供ES模块的命名导出（named exports），因此直接使用import { now, random, padStart } from "lodash"的写法，Rollup无法识别对应的导出项，导致报错。另外你的Rollup配置里external字段存在拼写错误（loadash应为lodash），这也会影响外部依赖的处理逻辑。

解决方案 #

方案一：单独导入Lodash函数（推荐） #

Lodash支持单独导入单个函数，既符合ES模块规范，又能减小最终打包体积。修改createUid.ts的导入语句：

import now from 'lodash/now'
import random from 'lodash/random'
import padStart from 'lodash/padStart'

这种方式无需额外修改Rollup配置，直接就能正常编译。

方案二：使用Rollup插件转换CommonJS模块 #

如果想保留批量导入的写法，可以通过@rollup/plugin-commonjs插件将CommonJS格式的Lodash转换为Rollup可识别的ES模块：

1. 安装插件：

npm install @rollup/plugin-commonjs --save-dev

2. 修改rollup.config.js，添加插件并修正external拼写：

import merge from 'deepmerge';
import { createBasicConfig } from '@open-wc/building-rollup';
import commonjs from '@rollup/plugin-commonjs';

const baseConfig = createBasicConfig();
export default merge(baseConfig, {
    input: ['./out-tsc/src/index.js'],
    output: {
        format: "esm",
        exports: "named",
        dir: 'dist',
    },
    external: ['lodash'], // 修正拼写错误
    plugins: [
        commonjs({
            include: 'node_modules/**'
        })
    ]
});

额外配置检查 #

确保tsconfig.json中的esModuleInterop设置为true，让TypeScript更好地处理CommonJS模块的导入：

{
  "compilerOptions": {
    // ...其他配置
    "esModuleInterop": true
  }
}

完成以上调整后，重新执行npm run build即可正常编译。

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