what-the-heck-are-cjs-amd-umd-and-esm-ikm

原始地址：https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm

‘’’
在一开始，JavaScript没有一种导入/导出模块的方法。这是一个问题。想象一下，将你的应用程序写在一个文件中会是一场噩梦！
然后，比我聪明得多的人尝试给JavaScript添加模块化功能。其中一些有CJS、AMD、UMD和ESM。你可能听说过其中一些（还有其他的方法，但这些是最重要的）。
我将介绍一些高层次的信息：语法、目的和基本行为。我的目标是帮助读者在实践中识别它们的使用。

CJS
CJS
CJS是CommonJS的缩写。它的代码看起来像这样：
//导入
const doSomething = require(‘./doSomething.js’);
//导出
module.exports = function doSomething(n) {
//做一些事情
}

• 有些人可能立即从Node中识别出CJS语法。这是因为Node使用CJS模块格式。
• CJS是同步导入模块的。
• 你可以从库node_modules或本地目录导入。可以使用以下方式之一：
  const myLocalModule = require(‘./some/local/file.js’)
  或者
  var React = require(‘react’);
• 当CJS导入时，它将给你一个导入对象的副本。
• CJS无法在浏览器中使用。它必须经过转译和捆绑。

AMD
AMD
AMD代表异步模块定义。下面是一个示例代码：
define([‘dep1’, ‘dep2’], function (dep1, dep2) {
//通过返回一个值来定义模块的值
return function () {};
});
或者
// “simplified CommonJS wrapping” https://requirejs.org/docs/whyamd.html
define(function (require) {
var dep1 = require(‘dep1’),
dep2 = require(‘dep2’);
return function () {};
});

• AMD异步导入模块（因此名字中带有“异步”一词）。
• AMD是为前端设计的（当它被提出时），而CJS用于后端。
• AMD语法比CJS更不直观。我认为AMD是CJS的完全相反的兄弟格式。

UMD
UMD
UMD代表通用模块定义。下面是一个可能的示例代码（来源）：
(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.KaTeX parse error: Expected 'EOF', got '}' at position 12: , root._); }̲ }(this, functi…, _) {
// 这是我定义模块实现的地方
var Requester = { // … };
return Requester;
}));

• 适用于前端和后端（因此名字中带有“通用”一词）。
• 与CJS或AMD不同，UMD更像一个配置多个模块系统的模式。可以在这里查看更多模式。
• 当使用Rollup/Webpack等打包工具时，UMD通常用作备用模块。

ESM
ESM
ESM代表ES模块。它是JavaScript实现标准模块系统的提案。我确定你们中的许多人已经见过这个：
import React from ‘react’;
还有其他一些应用示例：
import {foo, bar} from ‘./myLib’;
…
export default function() {
//你的函数
};
export const function1() {…};
export const function2() {…};

• 在许多现代浏览器中有效（https://caniuse.com/#feat=es6-module）。
• 它具有CJS式的简单语法和AMD的异步功能，是两者的结合。
• 由于ES6的静态模块结构，ESM可以进行树摇（消除无用代码）。
• ESM允许像Rollup这样的打包工具删除无关代码，从而加快网页加载速度。
• 可以在HTML中调用，只需要：

这在所有浏览器中可能还不能100%工作（来源）。

Summary
摘要

• ESM是最好的模块格式，因为它具有简单的语法、异步性质和可树摇性。
• UMD在任何地方都有效，并且通常用作ESM不起作用时的备用。
• CJS是同步的，适用于后端。
• AMD是异步的，适用于前端。
  感谢阅读，开发者们！将来，我计划更深入地研究每个模块，尤其是ESM，因为它充满了许多令人惊叹的功能。请继续关注！
  如果有任何错误，请告诉我。
  ‘’’