支持cjs及esm的npm包如何实现

这篇文章主要介绍“支持cjs及esm的npm包如何实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“支持cjs及esm的npm包如何实现”文章能帮助大家解决问题。

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包如何实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。