您好,登錄后才能下訂單哦!
這篇文章主要介紹“支持cjs及esm的npm包如何實(shí)現(xiàn)”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“支持cjs及esm的npm包如何實(shí)現(xiàn)”文章能幫助大家解決問題。
tsconfig.json
tsconfig-esm.json
package.json
tsconfig.json
{ "compilerOptions": { "target": "ES2015", "module": "commonjs", "outDir": "./dist/cjs", "esModuleInterop": true, "moduleResolution": "node" } }
tsconfig-esm.json
{ "extends": "./tsconfig.json", "compilerOptions": { "target": "es2015", "module": "es2015", "outDir": "./dist/esm", "moduleResolution": "node" } }
{ "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.config.js
package.json
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.config.js
package.json
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" } }
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" }, }
關(guān)于“支持cjs及esm的npm包如何實(shí)現(xiàn)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。