如何打一个既支持cjs，又支持esm的npm包？

原创

于 2023-05-06 11:10:03 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#npm #webpack #javascript

本文介绍了如何使用TypeScript的配置文件(tsc)、Rollup、Webpack和esbuild这四个打包工具，分别创建出同时兼容CommonJS(CJS)和ES模块(ESM)的npm包。通过提供不同的配置和输出设置，可以在同一项目中生成CJS和ESM两种格式的输出文件，确保包能在不同环境中正常工作。

模块化是一个老生常谈的问题了，打包工具层出不穷。

那么，如何利用这些打包工具去打出既支持cjs，又支持esm的npm包呢。

这篇文章不涉及概念，是一些打包实测。

demo repo: https://github.com/FrankKai/npm-bundle-demo

可以clone下来，本地构建测试。

tsc
rollup
webpack
esbuild

tsc

tsconfig.json
tsconfig-esm.json
package.json

cjs

tsconfig.json

{
   
   
  "compilerOptions": {
   
   
    "target": "ES2015",
    "module": "commonjs",
    "outDir": "./dist/cjs",
    "esModuleInterop": true,
    "moduleResolution": "node"
  }
}

esm

tsconfig-esm.json

{
   
   
  "extends": "./tsconfig.json",

  "compilerOptions": {
   
   
    "target": "es2015",
    "module": "es2015",
    "outDir": "./dist/esm",
    "moduleResolution": "node"
  <