正文
模块化是一个老生常谈的问题了，打包工具层出不穷。
那么，如何利用这些打包工具去打出既支持cjs，又支持esm的npm包呢。
这篇文章不涉及概念，是一些打包实测。
demo repo: github.com/FrankKai/np…
可以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"
},
}以上就是支持cjs及esm的npm包的示例详解的详细内容，更多关于npm包支持cjs esm的资料请关注阿兔在线工具其它相关文章！
