CJS、AMD、UMD和ESM规范

发表于 更新于

1. 常用的文件类型规范

  • 客户端基本上都是ES的开发规范;
  • nodejs服务端项目基本上都是CJS的开发规范;
  • 近两年的nestjs框架才让服务端出现了ES的文件类型;

2. 介绍

1. CJS

CJS 是 CommonJS的缩写，通过 module|require 来导入导出：

1
2
3
4
5
6
7
// importing 
const doSomething = require('./doSomething.js'); 

// exporting 
module.exports = function doSomething(n) {
// do something 
}
  • CJS通常是在Node中、Node服务端框架中。
  • CJS是同步导入模块
  • 你可以从node-modules中引入一个库或者从本地目录引入一个文件
  • CJS不能在浏览器中工作，它必须经过转换和打包
  • CJS的输出是运行时加载，输出的内容是值的拷贝而不是值的引用。

2. AMD

AMD代表异步模块定义

1
2
3
4
define(['dep1', 'dep2'], function (dep1, dep2) { 
//Define the module value by returning a value. 
return function () {}; 
});
  • AMD 是异步(asynchronously)导入模块的(因此得名)
  • 一开始被提议的时候，AMD 是为前端而做的(而 CJS 是后端)
  • AMD 的语法不如 CJS 直观。

3. UMD

UMD 代表通用模块定义（Universal Module Definition）

1
2
3
4
5
6
7
8
9
10
11
(function (root, factory) { 
    if (typeof define === "function" && define.amd) { 
        define(["jquery", "underscore"], factory); 
    } else if (typeof exports === "object") { 
        module.exports = factory(require("jquery"), require("underscore")); 
    } else { 
        root.Requester = factory(root.$, root._); 
    } 
}(this, function ($, _) { 
    // this is where I defined my module implementation var Requester = { // ... }; return Requester; 
}));
  • 在前端和后端都适用（“通用”因此得名）
  • 与 CJS 或 AMD 不同，UMD 更像是一种配置多个模块系统的模式。这里可以找到更多的模式
  • 当使用 Rollup/Webpack 之类的打包器时，UMD 通常用作备用模块
  • UMD先判断支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。再判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。都不行就挂载到 window 全局对象上面去

4. ESM

ESM 代表 ES 模块。这是 Javascript 提出的实现一个标准模块系统的方案。
我相信你们很多人都看到过这个:

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react'
 
 //or
 
 import {useState,useEffect} from 'react';
 
 //or
 
 const demo=()=> 1;
 export default demo;
 //or
 export {demo};
  • 在很多现代浏览器可以使用
  • 它兼具两方面的优点：具有 CJS 的简单语法和 AMD 的异步
  • ESM是编译时输出接口，输出的是值得引用。
  • ES6 模块不是对象，而是通过 export命令显式指定输出的代码，import时采用静态命令的形式。JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。模块内部引用的变化，会反应在外部。
  • 在import时可以指定加载某个输出值，而不是加载整个模块，这种加载称为“编译时加载”。在编译时就引入模块代码，而不是在代码运行时加载，所以无法实现条件加载。也正因为这个，使得静态分析成为可能。
  • 得益于 ES6 的静态模块结构，可以进行 Tree Shaking
  • ESM 允许像 Rollup 这样的打包器，删除不必要的代码，减少代码包可以获得更快的加载
  • 可以在 HTML 中调用，只要如下
1
2
3
4
<script type="module"> 
    import {func1} from 'my-lib'; 
    func1(); 
</script>

但是不是所有的浏览器都支持

3.结论

  • UMD 随处可见，通常在 ESM 不起作用的情况下用作备用
  • ESM 是异步的，适合前端，ESM输出是静态的，在编译时就能完成输出，输出的是值的引用，ESM(ESModule)是ECMAScript自己的模块化体系，具有简单的语法，异步特性和可摇树性，因此它是最好的模块化方案
  • CJS 是同步的，适合后端,CJS输出是一个对象，所以输出是在脚本运行完成后才执行，输出的是值的拷贝
  • AMD 是异步的，适合前端