如何构建同时支持CommonJS和ES模块的npm包实现示例？

本文共计602个文字，预计阅读时间需要3分钟。

目录 + 正文 + tsc + cjs + esm + package.json + rollup + rollup.config.js + package.json + webpack + webpack.config.js + package.json + esbuild + 正文 + 模块化是程序员常讨论的话题，打包工具层出不穷。那么，如何有效利用这些打包工具呢？

目录

• 正文
• tsc
• cjs
• esm
• package.json
• rollup
• rollup.config.js
• package.json
• webpack
• webpack.config.js
• package.json
• esbuild

正文

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

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

{ "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 } };

{ "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的资料请关注易盾网络其它相关文章！