CJS之间有何区别？

CommonJS（CJS）和ESModule（ESM）是JavaScript模块化的两种主要方式，分别适用于不同的开发环境和需求，以下将从多个方面详细对比这两种模块系统：

一、基本概念与使用场景

1、CommonJS（CJS）

定义：CommonJS是一种模块化规范，主要用于Node.js环境，它允许开发者将代码拆分为多个独立的模块，并通过require和module.exports语句进行模块间的交互。

使用场景：CommonJS广泛应用于服务器端开发，如Node.js项目，由于其同步加载的特性，适用于需要立即执行的场景。

2、ESModule（ESM）

定义：ESModule是ECMAScript自己的模块体系，于ES6引入，它通过export和import语句实现模块的导出和导入。

使用场景：ESModule适用于现代浏览器和前端框架，如React、Vue等，它支持静态分析，使得打包工具能够更高效地进行优化。

二、语法与特性

1、CommonJS

导出：使用module.exports或exports导出模块。

      const obj = { a: 1 };
      module.exports = obj;

引入：使用require引入模块。

      const obj = require('./test.js');

特性：CommonJS模块在运行时加载，输出的是值的浅拷贝。

2、ESModule

导出：使用export命令导出模块，可以是默认导出或命名导出。

      export const obj = { name: 'E1e' };
      export default { name: 'E1e' };

引入：使用import命令引入模块。

      import { obj } from './test.js';
      import obj from './test.js';

特性：ESModule在编译时加载，输出的是值的引用。

三、加载机制与性能

1、CommonJS

加载机制：CommonJS模块是同步加载的，这意味着在模块被加载时会立即执行其代码。

性能：由于同步加载的特性，CommonJS在首次加载时可能会有一定的性能开销，但在后续访问时可以直接从缓存中获取。

2、ESModule

加载机制：ESModule是异步加载的，这意味着模块可以在需要时才加载，从而提高了页面的初始加载速度。

性能：ESModule支持静态分析和Tree Shaking，可以显著减少打包后的文件大小，提高应用性能。

四、适用环境与兼容性

1、CommonJS

适用环境：CommonJS主要用于服务器端，特别是Node.js环境，虽然可以通过Babel等工具转译为浏览器可用的代码，但原生不支持浏览器环境。

兼容性：由于其广泛的应用，CommonJS在Node.js生态系统中有很高的兼容性。

2、ESModule

适用环境：ESModule适用于现代浏览器和前端框架，支持静态分析和异步加载，使其在前端开发中更具优势。

兼容性：ESModule需要较新的浏览器版本支持，对于旧版浏览器，可以通过Babel等工具进行转译。

五、文件后缀与配置

1、CommonJS

文件后缀：通常使用.js作为文件后缀，在Node.js项目中，默认情况下所有.js文件都被视为CommonJS模块。

配置：无需特殊配置，直接使用即可。

2、ESModule

文件后缀：使用.mjs作为文件后缀，或者在HTML文件中通过<script type="module">标签引入。

配置：在Node.js环境中使用ESModule时，需要在package.json文件中显式指定"type": "module"。

六、示例对比

1、CommonJS示例

   // a.js
   let age = 18;
   module.exports = {
       age,
       addAge: function () {
           age++;
       },
   };
   // b.js
   const { age, addAge } = require("./a.js");
   addAge();
   console.log(age); // 18

2、ESModule示例

   // a.mjs
   export let age = 18;
   export function addAge() {
       age++;
   }
   // b.mjs
   import { age, addAge } from "./a.mjs";
   addAge();
   console.log(age); // 19

CommonJS和ESModule各有优缺点，适用于不同的开发场景，CommonJS适合服务器端开发，具有同步加载和高兼容性的特点；而ESModule则更适合现代前端开发，支持静态分析和异步加载，有助于提高应用性能和打包效率，在实际开发中，应根据项目需求和目标环境选择合适的模块化方案。

小伙伴们，上文介绍了“cjs区别”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。