模块化是通病，打包工具层出不穷。那么，如何使用这些打包工具来创建同时支持cjs和esm的npm包。本文不涉及概念，只是一些封装测试。演示仓库：https://github.com/FrankKai/n...可以在本地克隆和构建以进行测试。tscrollupwebpackesbuildtsctsconfig.jsontsconfig-esm.jsonpackage.jsoncjstsconfig.json{"compilerOptions":{"target":"ES2015","module":"commonjs","outDir":"./dist/cjs","esModuleInterop":true,"moduleResolution":"node"}}esmtsconfig-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-rfdist&&tsc-ptsconfig.json&&tsc-ptsconfig-esm.json"},}rollurollup.config.jspackage.jsonrollup.config。jsexport默认值t[{输入：“src/index.js”，输出：[{文件：“dist/index.cjs.js”，格式：“cjs”}，{文件：“dist/index.esm.js”，格式:"es"},],},];package.json{"main":"dist/index.cjs.js","module":"dist/index.esm.js","scripts":{"build":"rollup-c",},}webpackwebpack.config.jspackage.jsonwebpack.config.jsconstpath=require("path");module.exports={mode:'none',entry:{"index.cjs“：{导入：'./src/index.js'，库：{类型：'commonjs2'，}，}，“index.esm”：{导入：'./src/index.js'，库：{类型：'module'，}，}，}，输出：{路径：path.resolve（__dirname，'dist'），文件名：“[name].js”，clean：true，}，实验：{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"}}esbuildpackage.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":"npmrunesbuild:cjs&&npmrunesbuild:esm"},"devDependencies":{"esbuild":"^0.14.49"},}
