您现在的位置是:首页 > Javascript
当前栏目
Javascript 中的 CJS、AMD、UMD 和 ESM 是什么?
2023-03-07 09:48:07 时间
一开始,Javascript 没有办法导入/导出模块。这是个问题。想象一下,在一个文件中编写您的应用程序 - 这将是一场噩梦!
然后,比我聪明得多的人试图为 Javascript 添加模块化。其中一些是CJS、AMD、UMD 和 ESM。您可能听说过其中一些(还有其他方法,但这些是大玩家)。
我将介绍高级信息:语法、目的和基本行为。我的目标是帮助读者在看到它们时认出。
CJS
CJS 是 CommonJS 的缩写。这是它的样子:
- //importing
- const doSomething = require('./doSomething.js');
- //exporting
- module.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 在浏览器中不起作用。它必须被转译和打包。
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'),
- dep2 = require('dep2');
- return function () {};
- });
- AMD 异步导入模块(因此得名)。
- AMD 是为前端设计的(当它被提出时)(而 CJS 后端)。
- AMD 语法不如 CJS 直观。我认为 AMD 是 CJS 的完全相反的兄弟。
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.$, root._);
- }
- }(this, function ($, _) {
- // this is where I defined my module implementation
- var Requester = { // ... };
- return Requester;
- }));
- 适用于前端和后端(因此得名Universal)。
- 与 CJS 或 AMD 不同,UMD 更像是一种配置多个模块系统的模式。
- UMD 通常在使用 Rollup/Webpack 等打包器时用作回退模块
ESM
ESM 代表 ES 模块。实现标准模块系统是 Javascript 的建议。相信很多人都看过这个:
- import React from 'react';
其他情况
- import {foo, bar} from './myLib';
- ...
- export default function() {
- // your Function
- };
- export const function1() {...};
- export const function2() {...};
- 适用于许多现代浏览器
- 它兼具两全其美:类似 CJS 的简单语法和 AMD 的异步
- Tree-shakeable,由于 ES6 的静态模块结构
- ESM 允许像 Rollup 这样的打包器删除不必要的代码,允许站点发送更少的代码以获得更快的加载。
可以在 HTML 中调用,只需执行以下操作:
- <script type="module">
- import {func1} from 'my-lib';
- func1();
- </script>
这可能无法在所有浏览器中 100% 工作。
概括
- ESM 是最好的模块格管理式,这要归功于其简单的语法、异步性质和 tree-shakeability。
- 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/
【责任编辑:赵宁宁 TEL:(010)68476606】
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?