支持cjs及esm的npm包實(shí)現(xiàn)示例詳解
更新時(shí)間：2022年08月07日 10:04:22 作者：趁你還年輕233
這篇文章主要為大家介紹了支持cjs及esm的npm包的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
模塊化是一個(gè)老生常談的問題了，打包工具層出不窮。
那么，如何利用這些打包工具去打出既支持cjs，又支持esm的npm包呢。
這篇文章不涉及概念，是一些打包實(shí)測。
demo repo: github.com/FrankKai/np…
可以clone下來，本地構(gòu)建測試。
- 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的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了詳解Node.js中間件是怎樣工作的，對中間件感興趣的同學(xué)，可以參考下2021-04-04
Node.js處理I/O數(shù)據(jù)之使用Buffer模塊緩沖數(shù)據(jù)
這篇文章介紹了Node.js使用Buffer模塊緩沖數(shù)據(jù)的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
node.js中stream流中可讀流和可寫流的實(shí)現(xiàn)與使用方法實(shí)例分析
這篇文章主要介紹了node.js中stream流中可讀流和可寫流的實(shí)現(xiàn)與使用方法,結(jié)合實(shí)例形式分析了node.js stream流可讀流和可寫流基本分類、原理、定義、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-02-02
本篇文章主要介紹了nodejs搭建本地http服務(wù)器教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
本文詳細(xì)講解了Node.js中的HTTP請求與響應(yīng)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
nodeJS服務(wù)器的創(chuàng)建和重新啟動(dòng)的實(shí)現(xiàn)方法
今天小編就為大家分享一篇nodeJS服務(wù)器的創(chuàng)建和重新啟動(dòng)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家介紹了node 可讀流與可寫流的運(yùn)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了node.js中的fs.lchmodSync方法使用說明,本文介紹了fs.lchmodSync的方法說明、語法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
其實(shí)Node.js就是運(yùn)行在服務(wù)端的JavaScript,Node.js是一個(gè)基于Chrome?JavaScript運(yùn)行時(shí)建立的一個(gè)平臺(tái),下面這篇文章主要給大家介紹了關(guān)于node.js安裝超詳細(xì)步驟教程的相關(guān)資料,需要的朋友可以參考下2023-06-06
node.js實(shí)現(xiàn)帶進(jìn)度條的多文件上傳
這篇文章主要為大家詳細(xì)介紹了node.js實(shí)現(xiàn)攜帶進(jìn)度條的多文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08