支持cjs及esm的npm包实现示例详解

更新时间：2022年08月07日 10:04:22 作者：趁你还年轻233

这篇文章主要为大家介绍了支持cjs及esm的npm包的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

模块化是一个老生常谈的问题了，打包工具层出不穷。

那么，如何利用这些打包工具去打出既支持cjs，又支持esm的npm包呢。

这篇文章不涉及概念，是一些打包实测。

demo repo: github.com/FrankKai/np…

可以clone下来，本地构建测试。

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 &amp;&amp; tsc -p tsconfig.json &amp;&amp; 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 &amp;&amp; npm run esbuild:esm"
  },
  "devDependencies": {
    "esbuild": "^0.14.49"
  },
}

以上就是支持cjs及esm的npm包的示例详解的详细内容，更多关于npm包支持cjs esm的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Nodejs全栈框架StrongLoop推荐
StrongLoop基本提供了制作一个移动产品所有的框架和工具，从标准的Backend server，Devops，应用监控，。要想介绍完全StrongLoop的所有产品得写一个长篇连载了，这里只简单的浏览一遍。
2014-11-11
node.js中的fs.writeSync方法使用说明
这篇文章主要介绍了node.js中的fs.writeSync方法使用说明,本文介绍了fs.writeSync的方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
2014-12-12
Nodejs异步回调之异常处理实例分析
这篇文章主要介绍了Nodejs异步回调之异常处理,结合实例形式分析了nodejs基于中间件进行异步回调异常处理过程出现的问题与相应的解决方法,需要的朋友可以参考下
2018-06-06
详解nodejs通过代理(proxy)发送http请求(request)
本篇文章主要介绍了nodejs通过代理(proxy)发送http请求(request)，具有一定的参考价值，有兴趣的可以了解一下
2017-09-09
一文学会如何升级npm管理的各依赖版本
npm在前端开发流程中提供了非常完善的自动化工具链,已成为每个前端开发者必备的工具,下面这篇文章主要给大家介绍了关于如何升级npm管理的各依赖版本,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-09-09
关于Node.js中的JXcore打包示例
这篇文章主要介绍了关于Node.js中的JXcore打包示例,JXcore 是一个支持多线程的 Node.js 发行版本，基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行,需要的朋友可以参考下
2023-05-05
Node.js抓取中文网页乱码问题和解决方法
这篇文章主要介绍了Node.js抓取中文网页乱码问题和解决方法,本文讲解了使用一些开源库解决抓取中出现的乱码问题,需要的朋友可以参考下
2015-02-02
Nodejs中Express 常用中间件 body-parser 实现解析
这篇文章主要介绍了Nodejs中Express 常用中间件 body-parser 实现解析，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
NodeJs环境安装与配置的实现步骤
本文主要介绍了NodeJs环境安装与配置,包括配置环境和配置国内镜像，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2024-01-01
深入浅析Node.js单线程模型
Node.js采用事件驱动和异步I/O 的方式，实现了一个单线程、高并发的运行时环境，而单线程就意味着同一时间只能做一件事，那么Node.js如何利用单线程来实现高并发和异步I/O？本文将围绕这个问题来探讨Node.js的单线程模型
2017-07-07