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

最新推荐文章于 2024-09-24 16:16:07 发布

原创最新推荐文章于 2024-09-24 16:16:07 发布 · 833 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#npm #webpack #javascript

前端同时被 3 个专栏收录

15 篇文章

订阅专栏

javascript

6 篇文章

订阅专栏

typescript

4 篇文章

订阅专栏

本文介绍了如何利用tsc, rollup, webpack和esbuild这四个打包工具，分别构建既能支持CommonJS（cjs）又能支持ES模块（esm）的npm包。提供了详细的配置文件和脚本示例，并附带了一个可本地测试的demorepo。通过这些工具，开发者可以灵活地为不同环境提供适配的模块格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

那么，如何利用这些打包工具去打出既支持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"
  }
}

package.json

{
  "main": "./dist/cjs/index.js",
  "module": "./dist/esm/index.js",
  "scripts": {
    "build": "rm -rf dist && tsc -p tsconfig.json && tsc -p tsconfig-esm.json"
  },
}

rollup

rollup.config.js
package.json

rollup.config.js

export default [
  {
    input: "src/index.js",
    output: [
      { file: "dist/index.cjs.js", format: "cjs" },
      { file: "dist/index.esm.js", format: "es" },
    ],
  },
];

package.json

{
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "scripts": {
    "build": "rollup -c",
  },
}

webpack

webpack.config.js
package.json

webpack.config.js

const path = require("path");

module.exports = {
  mode: 'none',
  entry: {
    "index.cjs": {
      import: './src/index.js',
      library: {
        type: 'commonjs2',
      },

    },
    "index.esm": {
      import: './src/index.js',
      library: {
        type: 'module',
      },
    },
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].js",
    clean: true,
  },
  experiments: {
    outputModule: true
  }
};

package.json

{
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "scripts": {
    "build": "webpack",
  },
  "devDependencies": {
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2"
  }
}

esbuild

package.json

{
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "scripts": {
    "esbuild:cjs": "esbuild ./src/index.js --bundle --outfile=dist/index.cjs.js --format=cjs",
    "esbuild:esm": "esbuild ./src/index.js --bundle --outfile=dist/index.esm.js --format=esm",
    "build": "npm run esbuild:cjs && npm run esbuild:esm"
  },
  "devDependencies": {
    "esbuild": "^0.14.49"
  },
}