Javascript 中的 CJS、AMD、UMD 和 ESM 是什么？

更新时间：2024-03-29 12:47作者：小乐

最初，Javascript 无法导入/导出模块。这是个问题。想象一下将您的应用程序编写在单个文件中- 这将是一场噩梦！然后，比我聪明得多的人尝试为Javascript 添加模块化。其中一些是CJS、AMD、UMD 和ESM。您可能听说过其中的一些（还有其他方法，但这些都是大玩家）。我将介绍高级信息：语法、目的和基本行为。我的目标是帮助读者在看到它们时认出它们。

CJSCJS 是CommonJS 的缩写。它看起来是这样的：

//导入const doSomething=require('./doSomething.js'); //exportingmodule.exports=function doSomething(n) { //do Something} 你们中的一些人可能会立即从node.js 语法中认出CJS。这是因为Node 使用CJS 模块格式。 CJS同步导入模块。可以从库node_modules或本地目录导入。通过const myLocalModule=require('./some/local/file.js') 或var React=require('react');当CJS 导入时，它会为您提供导入对象的副本。 CJS 不适用于浏览器。必须对其进行翻译和打包。 AMDAMD 代表异步模块定义。这是示例代码：

Define(['dep1', 'dep2'], function (dep1, dep2) { //通过返回值来定义模块值return function () {};});or

//'简化的CommonJS 包装' https://requirejs.org/docs/whyamd.htmldefine(function (require) { var dep1=require('dep1'), dep2=require('dep2'); return function () {};}) ;AMD 异步导入模块（因此得名）。 AMD 是为前端设计的（当它被提出时）（而CJS 是后端）。 AMD 语法不如CJS 直观。我认为AMD是CJS完全相反的兄弟。 UMDUMD 代表通用模块定义。这就是它的样子（来源）：

import React from 'react';其他情况

import {foo, bar} from './myLib';export default function() { //你的函数};export const function1() {.};export const function2() {.};适用于许多现代浏览器它提供了两全其美的优点：类似CJS 的简单语法和AMD 的异步Tree-shakeable，这要归功于ES6 的静态模块结构ESM 允许像Rollup 这样的打包程序删除不必要的代码，允许网站发送更少的代码以加快加载速度。可以在HTML 中调用，只需执行以下操作：这可能无法在所有浏览器中100% 工作。

总结ESM 是最好的模块模式管理风格，这要归功于它简单的语法、异步特性和树可抖动性。 UMD 随处可用，并且通常在ESM 不起作用时用作后备方案。 CJS 是同步的，有利于后端。 AMD是异步的，适合前端。谢谢阅读。（本文由温书其武翻译自Igor Irianto的文章《What Are CJS, AMD, UMD, and ESM in Javascript》，转载请注明出处。原文链接：https://irian.to/blogs/what-are-cjs-amd-umd-and-esm-in-javascript/）

上一篇：听说一建成绩会在这天公布？真的假的？一建几时出成绩

下一篇：美国最新油电混动军车，和比亚迪唐的模式几乎一致，美国油电混合车型推荐

加载中...

美国留学