模块化是一个老生常谈的问题了,打包工具层出不穷。
那么,如何利用这些打包工具去打出既支持cjs,又支持esm的npm包呢。
这篇文章不涉及概念,是一些打包实测。
demo repo: https://github.com/FrankKai/n...
可以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" }, }