模块化是一个陈词滥调的问题了，打包工具层出不穷。
那么，如何利用这些打包工具去打出既反对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"},}