个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Javascript 中的 CJS、AMD、UMD 和 ESM 是什么？由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

一开始，Javascript 没有办法导入/导出模块。这是个问题。想象一下，在一个文件中编写您的应用程序 - 这将是一场噩梦.

然后，比我聪明得多的人试图为 Javascript 添加模块化。其中一些是CJS、AMD、UMD 和 ESM。您可能听说过其中一些(还有其他方法，但这些是大玩家).

我将介绍高级信息：语法、目的和基本行为。我的目标是帮助读者在看到它们时认出.

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

CJS

CJS 是 CommonJS 的缩写。这是它的样子:

  1. //importing  
  2. const doSomething = require('./doSomething.js');  
  3.  
  4. //exporting 
  5. module.exports = function doSomething(n) { 
  6.   // do something 
  7. } 
  • 你们中的一些人可能会立即从 node.js 中识别出 CJS 语法。那是因为 node使用 CJS 模块格式。
  • CJS 同步导入模块。
  • 可以从库node_modules或本地目录导入。无论是通过const myLocalModule = require('./some/local/file.js')还是 var React = require('react'); 都可以。
  • 当 CJS 导入时，它会给你一个导入对象的副本。
  • CJS 在浏览器中不起作用。它必须被转译和打包。

AMD

AMD 代表异步模块定义。这是一个示例代码:

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

要么 。

  1. // "simplified CommonJS wrapping" https://requirejs.org/docs/whyamd.html 
  2. define(function (require) { 
  3.     var dep1 = require('dep1'), 
  4.         dep2 = require('dep2'); 
  5.     return function () {}; 
  6. }); 
  • AMD 异步导入模块(因此得名)。
  • AMD 是为前端设计的(当它被提出时)(而 CJS 后端)。
  • AMD 语法不如 CJS 直观。我认为 AMD 是 CJS 的完全相反的兄弟。

UMD

UMD 代表通用模块定义。这是它的样子(来源):

  1. (function (root, factory) { 
  2.     if (typeof define === "function" && define.amd) { 
  3.         define(["jquery", "underscore"], factory); 
  4.     } else if (typeof exports === "object") { 
  5.         module.exports = factory(require("jquery"), require("underscore")); 
  6.     } else { 
  7.         root.Requester = factory(root.$, root._); 
  8.     } 
  9. }(this, function ($, _) { 
  10.     // this is where I defined my module implementation 
  11.  
  12.     var Requester = { // ... }; 
  13.  
  14.     return Requester; 
  15. })); 
  • 适用于前端和后端(因此得名Universal)。
  • 与 CJS 或 AMD 不同，UMD 更像是一种配置多个模块系统的模式。
  • UMD 通常在使用 Rollup/Webpack 等打包器时用作回退模块

ESM

ESM 代表 ES 模块。实现标准模块系统是 Javascript 的建议。相信很多人都看过这个:

  1. import React from 'react'; 

其他情况 。

  1. import {foo, bar} from './myLib'; 
  2.  
  3. ... 
  4.  
  5. export default function() { 
  6.   // your Function 
  7. }; 
  8. export const function1() {...}; 
  9. export const function2() {...}; 
  • 适用于许多现代浏览器
  • 它兼具两全其美：类似 CJS 的简单语法和 AMD 的异步
  • Tree-shakeable，由于 ES6 的静态模块结构
  • ESM 允许像 Rollup 这样的打包器删除不必要的代码，允许站点发送更少的代码以获得更快的加载。

可以在 HTML 中调用，只需执行以下操作:

  1. <script type="module"> 
  2.   import {func1} from 'my-lib'; 
  3.  
  4.   func1(); 
  5. </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/ 。

  。

最后此篇关于Javascript 中的 CJS、AMD、UMD 和 ESM 是什么？的文章就讲到这里了,如果你想了解更多关于Javascript 中的 CJS、AMD、UMD 和 ESM 是什么？的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0
文章推荐： Python进阶之全面解读高级特性之切片
文章推荐： 写给运维的Nginx秘籍
文章推荐： 在python里协程使用同步锁Lock的实例
文章推荐： 对python 通过ssh访问数据库的实例详解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com