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 通常用作备用模块
CJS, AMD, UMD,ESM 简洁解释相关推荐
- Javascript模块化方法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"). 设置为假则不变换 ...
- int argc,char*argv[ ]的简洁解释
1.(arguments, argument counter(计数个数) 和 argument vector (矢量,带有方向的变量参数,也就是指针) argc命令行输入参数的个数 int main( ...
- 简洁解释k++,++k,k+1,k+=1的区别(附图)
以下为结合图进行说明 k++和++k两者都是递增1,但区别就在于k++是先赋值给n再++(n=k),而++k是先++后再赋值给n(n=k++). 但两者不论是哪一种,区别也仅在于执行++那一行,++执 ...
- JS打包工具rollup——完全入门指南
因项目需要,最近一直在研究前端打包技术,参照以下文章及rollup官网,通过亲手操练,对rollup有了初步的了解.看到一篇不错的文章,转载记录.感谢作者的无私分享. 原文链接地址:https://s ...
- JavaScript模块 commonJS、AMD、UMD、ES6
模块化 早期,立即调用函数闭包.类.对象实现 Node有自己的模块系统 ES6,JavaScript依托import.export的静态模块系统(不能实现模块的按需加载) 虽然浏览器很早就支持动态导入 ...
最新文章
- LVS负载均衡的简单实现
- 组态王字符串转换整数_字符串转换整数(LC8)
- 【Android 逆向】ARM CPU 架构体系 ( ARM 内存模型 | ARM 架构堆的实现 | ARM 架构栈的实现 )
- Zephyr内核到1.5版本的改进
- 南通市交巡警支队同城异地容灾备份系统项目中标结果公告
- NewCode----数串
- python解析response的json_从HTML responseTex解析JSON
- ORACLE因为字符集不同,进行中文条件查询,查询结果为空
- spring 事务传播行为类型
- 使用bootbox.js(二级务必提交书面和数字到数字中国)
- java jsp乱码怎么解决_Java/JSP中文乱码问题解决心得
- html使用iframe src,HTML IFrame src用法及代码示例
- ei会议和ei源刊的区别_ei和核心期刊的区别在哪里?
- 第十二周:微信开放平台登录接口
- ctf writeup之程序员密码
- Windows上帝模式——隐私浏览必备
- VBA-循环语句之Do...Loop
- <Halcon>基于形状和轮廓的模板匹配
- Nokia Open MSS 学习个人笔记
- SAP 特殊采购类遇到Q库存
热门文章
- 10、Kafka 消息订阅系统
- python使用GDAL/OGR/OSR时设置GDAL_DATA环境变量
- python——父类与子类的一些说明
- 经营棋牌室的难点和痛点
- 华为NBlot物联网学习内
- NB-IoT和eMTC到底有什么不同?
- java ao层_Java学习过程中的一些记录 DO、DTO、BO、AO、VO、POJO定义 | 酷客365
- 磁盘黑色未分配区域恢复成绿色逻辑分区
- 02 nRF52832芯片简介
- 装部署VMware vSphere 5.5文档 (6-2) 为IBM x3850 X5服务器安装配置VMware ESXi