首页 / JAVASCRIPT / 【面试说】Javascript 中的 CJS, AMD, UMD 和 ESM是什么？

【面试说】Javascript 中的 CJS, AMD, UMD 和 ESM是什么？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了【面试说】Javascript 中的 CJS, AMD, UMD 和 ESM是什么？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2727字，纯文字阅读大概需要4分钟。

内容图文

最初，Javascript 没有导入/导出模块的方法， 这是让人头疼的问题。 想象一下，只用一个文件编写应用程序——这简直是噩梦！

然后，很多比我聪明得多的人试图给 Javascript 添加模块化。其中就有 CJS、AMD、UMD 和 ESM。你可能听说过其中的一些方法(还有其他方法，但这些是比较通用的)。

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

CJS

CJS 是 CommonJS 的缩写。经常我们这么使用：

// importing 
const doSomething = require('./doSomething.js'); 

// exporting
module.exports = function doSomething(n) {
  // do something
}
复制代码
  • 很多人可以从 Node 中立刻认出 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 是异步(asynchronously)导入模块的(因此得名)
  • 一开始被提议的时候，AMD 是为前端而做的(而 CJS 是后端)
  • AMD 的语法不如 CJS 直观。我认为 AMD 和 CJS 完全相反

UMD

UMD 代表通用模块定义（Universal Module Definition）。下面是它可能的样子(来源)

(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;
}));
复制代码
  • 在前端和后端都适用（“通用”因此得名）
  • 与 CJS 或 AMD 不同，UMD 更像是一种配置多个模块系统的模式。这里可以找到更多的模式
  • 当使用 Rollup/Webpack 之类的打包器时，UMD 通常用作备用模块

ESM

ESM 代表 ES 模块。这是 Javascript 提出的实现一个标准模块系统的方案。我相信你们很多人都看到过这个:

import React from 'react';
复制代码

或者其他更多的

import {foo, bar} from './myLib';

...

export default function() {
  // your Function
};
export const function1() {...};
export const function2() {...};
复制代码
<script type="module">
  import {func1} from 'my-lib';

  func1();
</script>

本文首发于前端黑洞网，博客园同步跟新



内容总结

以上是互联网集市为您收集整理的【面试说】Javascript 中的 CJS, AMD, UMD 和 ESM是什么？全部内容，希望文章能够帮你解决【面试说】Javascript 中的 CJS, AMD, UMD 和 ESM是什么？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/600480.html

来源：【匿名】