Javascript模块化方法CJS, AMD, UMD,ESM 简洁解释

前言：

CJS、AMD、UMD 和 ESM都是给 Javascript 添加模块化的方法，还有其他方法，但这些是比较通用的。什么？你不知道什么叫模块化？那你肯定写过import * from ''吧，这就已经使用了模块化的技术思想。

ESM (ES 模块, 异步导入，用于浏览器端)

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 的异步
得益于 ES6 的静态模块结构，可以进行 Tree Shaking
ESM 允许像 Rollup 这样的打包器，删除不必要的代码，减少代码包可以获得更快的加载

CJS (CommonJS:同步导入模块)

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

// importing
const doSomething = require('./doSomething.js');
// exporting
module.exports = function doSomething(n) {// do something
}

Node 就是使用 CJS 模块的
CJS 是同步导入模块
你可以从 node_modules 中引入一个库或者从本地目录引入一个文件。如 const myLocalModule = require(’./some/local/file.js’) 或者 var React = require(‘react’); ，都可以起作用,当 CJS 导入时，它会给你一个导入对象的副本.
CJS 不能在浏览器中工作。它必须经过转换和打包

AMD (asynchronously：异步模块定义)

示例

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（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 implementationvar Requester = { // ... };return Requester;
}));

在前端和后端都适用（“通用”因此得名）
与 CJS 或 AMD 不同，UMD 更像是一种配置多个模块系统的模式。这里可以找到更多的模式
当使用 Rollup/Webpack 之类的打包器时，UMD 通常用作备用模块

转载于：https://blog.csdn.net/qq_38974163/article/details/120078340

Javascript模块化方法CJS, AMD, UMD,ESM 简洁解释相关推荐

CJS, AMD, UMD,ESM 简洁解释
前言: CJS.AMD.UMD 和 ESM都是给 Javascript 添加模块化的方法,还有其他方法,但这些是比较通用的.什么?你不知道什么叫模块化?那你肯定写过import * from ''吧, ...
CJS,AMD,UMD和ESM
JS中加入了模块的概念.其中就有CJS,AMD,UMD,ESM这些模块的出现. CJS cjs是common js的缩写,它的代码语法长这个样子: // importing const doSomet ...
什么是CJS,AMD,UMD和ESM?
JS中才加入了模块的概念.其中就有CJS,AMD,UMD,ESM这些模块的出现. CJS cjs是common js的缩写,主要用于服务器端,它的代码语法长这个样子: // importing con ...
面试 Javascript 中的 CJS, AMD, UMD 和 ESM是什么？
最初,Javascript 没有导入/导出模块的方法, 这是让人头疼的问题. 想象一下,只用一个文件编写应用程序--这简直是噩梦! 然后,很多比我聪明得多的人试图给 Javascript 添加模块化. ...
前端模块规范AMD/UMD/CommonJs
.babelrc文件中的:module设置为false,为什么会要设置成false? 解释:使ES6模块语法转换到另一个模块类型(默认启用"commonjs"). 设置为假则不变换 ...
javascript基础修炼(4)——UMD规范的代码推演
javascript基础修炼(4)--UMD规范的代码推演 1. UMD规范地址:https://github.com/umdjs/umd UMD规范,就是所有规范里长得最丑的那个,没有之一!!!它 ...
在JavaScript中实现yield，实用简洁实现方式。
原题还是老赵的: http://blog.zhaojie.me/2010/06/code-for-fun-iterator-generator-yield-in-javascript.html 原以为 ...
int argc，char*argv[ ]的简洁解释
1.(arguments, argument counter(计数个数) 和 argument vector (矢量,带有方向的变量参数,也就是指针) argc命令行输入参数的个数 int main( ...
暴打JavaScript语法之getElementById()、getElementsByTagName()全能解释
大家好这里是X

Javascript模块化方法CJS, AMD, UMD,ESM 简洁解释

前言：

ESM (ES 模块, 异步导入，用于浏览器端)

CJS (CommonJS:同步导入模块)

AMD (asynchronously：异步模块定义)

UMD（Universal Module Definition：通用模块定义）

Javascript模块化方法CJS, AMD, UMD,ESM 简洁解释相关推荐

最新文章

热门文章