在学习开发npm工具包中，会遇到大大小小的问题，比如项目是否支持CJS、ESM、ADM、UMD等文件类型。再者，公司项目中，可能会有很多开发人员知道，客户端基本上都是ES的开发规范，而nodejs服务端项目基本上都是CJS的开发规范，直到近两年的nestjs框架才让服务端出现了es的文件类型。

下面介绍一下每个文件类型的使用语法、目的和基本行为。

CJS

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

// importing 
const doSomething = require('./doSomething.js'); 

// exporting 
module.exports = function doSomething(n) {
// do something 
}

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

const demoFile=require('./smoe/local/file.js');

// or

var React = require('react');

AMD

AMD代表异步模块定义，如下：

define(['dep1', 'dep2'], function (dep1, dep2) { 
//Define the module value by returning a value. 
return function () {}; 
});

或者

// "simplified CommonJS wrapping" https://requirejs.org/docs/whyamd.html 
define(function (require) { 
    var dep1 = require('dep1'), 
    var dep2 = require('dep2'); 
    return function () {}; 
});

AMD 是异步(asynchronously)导入模块的(因此得名)
一开始被提议的时候，AMD 是为前端而做的(而 CJS 是后端)
AMD 的语法不如 CJS 直观。我认为 AMD 和 CJS 完全相反

UMD

UMD 代表通用模块定义（Universal Module Definition）。下面是它可能的样子(来源)

(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 通常用作备用模块

ESM

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

 import React from 'react'
 
 //or
 
 import {useState,useEffect} from 'react';
 
 //or
 
 const demo=()=> 1;
 export default demo;
 //or
 export {demo};

在很多现代浏览器可以使用
它兼具两方面的优点：具有 CJS 的简单语法和 AMD 的异步
ESM是编译时输出接口，输出的是值得引用。
得益于 ES6 的静态模块结构，可以进行 Tree Shaking
ESM 允许像 Rollup 这样的打包器，删除不必要的代码，减少代码包可以获得更快的加载
可以在 HTML 中调用，只要如下

<script type="module"> 
    import {func1} from 'my-lib'; 
    func1(); 
</script>

但是不是所有的浏览器都支持（来源）

总结

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

什么是CJS、AMD、UMD和ESM规范？

CJS

AMD

UMD

ESM

总结