支持cjs及esm的npm包實(shí)現(xiàn)示例詳解
更新時(shí)間：2022年08月07日 10:04:22 作者：趁你還年輕233
這篇文章主要為大家介紹了支持cjs及esm的npm包的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
模塊化是一個(gè)老生常談的問(wèn)題了，打包工具層出不窮。
那么，如何利用這些打包工具去打出既支持cjs，又支持esm的npm包呢。
這篇文章不涉及概念，是一些打包實(shí)測(cè)。
demo repo: github.com/FrankKai/np…
可以clone下來(lái)，本地構(gòu)建測(cè)試。
- 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" },
],
},
];
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包的示例詳解的詳細(xì)內(nèi)容，更多關(guān)于npm包支持cjs esm的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Nodejs + Websocket 指定發(fā)送及群聊的實(shí)現(xiàn)
這篇文章主要介紹了Nodejs + Websocket 指定發(fā)送及群聊的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
基于Express和Multer實(shí)現(xiàn)文件本地服務(wù)器文件上傳功能
在現(xiàn)代應(yīng)用程序中，文件上傳功能成為了用戶(hù)共享和存儲(chǔ)數(shù)據(jù)的重要途徑，所以本文我們一起來(lái)探討文件上傳中間件的重要性，并提供常見(jiàn)的實(shí)現(xiàn)方法和相應(yīng)的代碼吧2023-06-06
環(huán)境變量是現(xiàn)代化開(kāi)發(fā)中的關(guān)鍵實(shí)踐,它有效解決了配置信息硬編碼帶來(lái)的維護(hù)難題,本文深入解析了Node.js中環(huán)境變量的核心機(jī)制和多種實(shí)踐方案,感興趣的朋友一起學(xué)習(xí)吧2025-11-11
node.JS的crypto加密模塊使用方法詳解(MD5,AES,Hmac,Diffie-Hellman加密)
本文將詳細(xì)介紹node.JS的加密模塊crypto實(shí)現(xiàn)MD5,AES,Hmac,Diffie-Hellman加密的詳解方法,需要的朋友可以參考下2020-02-02
node.js使用免費(fèi)的阿里云ip查詢(xún)獲取ip所在地【推薦】
這篇文章主要介紹了node.js使用免費(fèi)的阿里云ip查詢(xún)獲取ip所在地的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09
Express框架搭建項(xiàng)目的實(shí)現(xiàn)步驟
Express是一個(gè)基于Node.js平臺(tái)的輕量級(jí)Web應(yīng)用框架,它提供了簡(jiǎn)潔的API和豐富的功能,本文主要介紹了Express框架搭建項(xiàng)目的實(shí)現(xiàn)步驟,感興趣的可以了解一下2024-06-06
淺談在koa2中實(shí)現(xiàn)頁(yè)面渲染的全局?jǐn)?shù)據(jù)
本篇文章主要介紹了淺談在koa2中實(shí)現(xiàn)頁(yè)面渲染的全局?jǐn)?shù)據(jù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
node-red教程之dashboard簡(jiǎn)介與輸入型儀表板控件的使用
Node-red支持自定義節(jié)點(diǎn)，當(dāng)然也就支持自定義圖形化的節(jié)點(diǎn)。也有優(yōu)秀的開(kāi)發(fā)者把自己建立的圖形化節(jié)點(diǎn)無(wú)償分享。這里給出一個(gè)股票界面的例子，讓大家看一看優(yōu)秀的node-red界面能做到什么樣子2022-01-01
這篇文章主要介紹了Nodejs全局安裝和本地安裝的不同之處的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
服務(wù)端nodejs抓取jsonp接口數(shù)據(jù)實(shí)現(xiàn)示例
這篇文章主要為大家介紹了服務(wù)端nodejs抓取jsonp接口數(shù)據(jù)實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06