共计 1802 个字符,预计需要花费 5 分钟才能阅读完成。
模块化是一个陈词滥调的问题了,打包工具层出不穷。
那么,如何利用这些打包工具去打出既反对 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"}, }
正文完