使用Rollup打包TypeScript库后出现命名导出找不到的问题

问题根源 #

crypto-js、ts-luxon属于CommonJS模块，当你的库以ES模块（ESM）格式输出时，Rollup默认不会处理外部CommonJS模块的导出结构，导致生成的ESM代码尝试从这些模块读取命名导出，但ES模块加载器无法将CommonJS的module.exports识别为标准命名导出，从而抛出错误。

具体解决步骤 #

1. 配置Rollup的CommonJS处理插件 #

安装@rollup/plugin-commonjs插件，让它明确映射外部CommonJS模块的命名导出：

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

在Rollup配置文件中添加插件（需放在TypeScript插件之后）：

import commonjs from '@rollup/plugin-commonjs';

export default {
  // 你的其他Rollup配置（如external、input等）
  plugins: [
    // ...typescript() 等其他插件
    commonjs({
      namedExports: {
        // 列出你在库中用到的crypto-js命名导出
        'crypto-js': ['enc', 'SHA256', 'AES'],
        // 列出你用到的ts-luxon命名导出
        'ts-luxon': ['DateTime', 'Duration']
      }
    })
  ],
  output: [
    // 你的原有输出配置
    {
      file: `dist/kik-uc-common-fe.umd.min.js`,
      name: "ucApiNestCommonFe",
      format: "umd",
      sourcemap: false,
      plugins: [terser()]
    },
    {file: `dist/kik-uc-common-fe.es6.min.mjs`, format: "esm", sourcemap: false, plugins: [terser()]}
  ]
};

2. 调整库的TypeScript配置 #

确保tsconfig.json开启CommonJS兼容选项：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    // 其他配置...
  }
}

esModuleInterop和allowSyntheticDefaultImports会让TypeScript生成更兼容CommonJS模块的ESM代码。

3. 优化package.json的exports字段 #

明确区分ESM和CommonJS入口，帮助消费端正确加载对应格式：

"exports": {
  ".": {
    "types": "./index.d.ts",
    "import": "./kik-uc-common-fe.es6.min.mjs",
    "require": "./kik-uc-common-fe.umd.min.js",
    "default": "./kik-uc-common-fe.umd.min.js"
  }
}

临时兼容方案（不推荐长期使用） #

如果暂时无法修改库的打包配置，可让消费端改用默认导入后解构的方式：

// 替代原来的命名导入
import cryptoJs from 'crypto-js';
const { enc } = cryptoJs;

import luxon from 'ts-luxon';
const { DateTime } = luxon;

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