这篇文章主要介绍“支持cjs及esm的npm包如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“支持cjs及esm的npm包如何实现”文章能帮助大家解决问题。
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"
},
}
关于“支持cjs及esm的npm包如何实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。