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

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

创新互联公司2013年至今，先为忠县等服务建站，忠县等地企业，进行企业商务咨询服务。为忠县企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

然后，比我聪明得多的人试图为 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 中调用，只需执行以下操作：

 
 
 
 
  
  
  
   
  
  
  
    import {func1} from 'my-lib'; 
  
  
  
   
  
  
  
    func1();

这可能无法在所有浏览器中 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】

当前名称：Javascript中的CJS、AMD、UMD和ESM是什么？
分享URL：http://www.mswzjz.com/qtweb/news46/180446.html

成都网站建设公司_创新互联，为您提供静态网站、建站公司、品牌网站设计、域名注册、全网营销推广、服务器托管

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容