聊聊Node两种模块规范：CJS 与 ESM，有什么不同点？-易企推网

本篇文章给大家带大家了解一下node的两种模块规范（难以相容的 cjs 与 esm），介绍一下cjs 和 esm 的不同点，怎么实现 cjs、esm 混写，希望对大家有所帮助！

聊聊Node两种模块规范：CJS 与 ESM，有什么不同点？

自 13.2.0 版本开始，Nodejs 在保留了 CommonJS（CJS）语法的前提下，新增了对 ES Modules（ESM）语法的支持。

天下苦 CJS 久已，Node 逐渐拥抱新标准的规划当然值得称赞，我们也会展望未来 Node 不再需要借助工具，就能打破两种模块化语法的壁垒……

但实际上，一切没有想象中的那么美好。

借助构建工具可以实现 CJS 模块、ES 模块的混用，甚至可以在同一个模块同时混写两种规范的 API，让开发不再需要关心 Node.js 上面的限制。另外构建工具还能利用 ESM 在编译阶段静态解析的特性，实现 Tree-shaking 效果，减少冗余代码的输出。

这里我们以 rollup 为例，先做全局安装：

pnpm i -g rollup

登录后复制

接着再安装 rollup-plugin-commonjs 插件，该插件可以让 rollup 支持引入 CJS 模块（rollup 本身是不支持引入 CJS 模块的）：

pnpm i --save-dev @rollup/plugin-commonjs

登录后复制

我们在项目根目录新建 rollup 配置文件 rollup.config.js：

import commonjs from 'rollup-plugin-commonjs';export default {  input: 'index.js',  // 入口文件  output: {    file: 'bundle.js',  // 目标文件    format: 'iife'  },  plugins: [    commonjs({      transformMixedEsModules: true,      sourceMap: false,    })  ]};

登录后复制

plugin-commonjs 默认会跳过所有含 import/export 的模块，如果要支持如 import + require 的混合写法，需要带 transformMixedEsModules 属性。

接着执行 rollup --config 指令，就能按照 rollup.config.js 进行编译和打包了。

示例

/** @file a.js **/export let func = () => {    console.log("It's an a-func...");}export let deadCode = () => {    console.log("[a.js deadCode] Never been called here");}/** @file b.js **/// named exportsmodule.exports = {    func() {        console.log("It's a b-func...")    },    deadCode() {        console.log("[b.js deadCode] Never been called here");    }}/** @file c.js **/module.exports.func = () => {    console.log("It's a c-func...")};module.exports.deadCode = () => {    console.log("[c.js deadCode] Never been called here");}/** @file index.js **/let a = require('./a');import { func as bFunc } from './b.js';import { func as cFunc } from './c.js';a.func();bFunc();cFunc();

登录后复制

到 Github 获取示例代码（test4）:

github/VaJoy/BlogDemo3/tree/main/220220/test4

打包后的 bundle.js 文件如下：

(function () {'use strict';function getAugmentedNamespace(n) {if (n.__esModule) return n;var a = Object.defineProperty({}, '__esModule', {value: true});Object.keys(n).forEach(function (k) {var d = Object.getOwnPropertyDescriptor(n, k);Object.defineProperty(a, k, d.get ? d : {enumerable: true,get: function () {return n[k];}});});return a;}let func$1 = () => {    console.log("It's an a-func...");};let deadCode = () => {    console.log("[a.js deadCode] Never been called here");};var a$1 = /*#__PURE__*/Object.freeze({__proto__: null,func: func$1,deadCode: deadCode});var require$$0 = /*@__PURE__*/getAugmentedNamespace(a$1);var b = {    func() {        console.log("It's a b-func...");    },    deadCode() {        console.log("[b.js deadCode] Never been called here");    }};var func = () => {    console.log("It's a c-func...");};let a = require$$0;a.func();b.func();func();})();

登录后复制

可以看到，rollup 通过 Tree-shaking 移除掉了从未被调用过的 c 模块的 deadCode 方法，但 a、b 两模块中的 deadCode 代码段未被移除，这是因为我们在引用 a.js 时使用了 require，在 b.js 中使用了 CJS named exports，这些都导致了 rollup 无法利用 ESM 的特性去做静态解析。

常规在开发项目时，还是建议尽量使用 ESM 的语法来书写全部模块，这样可以最大化地利用构建工具来减少最终构建文件的体积。

希望本文能为你提供帮助，共勉~

更多node相关知识，请访问：nodejs 教程！

以上就是聊聊Node两种模块规范：CJS 与 ESM，有什么不同点？的详细内容，更多请关注易企推科技其它相关文章！

本文地址：网络知识频道 https://www.hkm168.com/jiqiao/1150952.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！