ES6 (ES 模块, 异步导入,用于浏览器端)
ESM 代表 ES 模块。这是 Javascript 提出的实现一个标准模块系统的方案。
示例:
js
export,const utils =,{
add: function(a, b) {
console. log(a + b)
}
}
//,main. js文件
import { utils } from ,"./utils"
utils. add(1, 2)
它兼具两方面的优点:具有 CJS 的简单语法和 AMD 的异步
得益于 ES6 的静态模块结构,可以进行 Tree Shaking
ESM 允许像 Rollup 这样的打包器,删除不必要的代码,减少代码包可以获得更快的加载
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:异步模块定义)
示例:
//utils.js
define([],,function(),{
return : {
add: function(a, b) {
console.log(a + b)
}
};
});
// main.js ,文件
require( ['./utils'],,function(utils) {
utils.add(1, 2)
});
CMD(Common Module Definition:就近依赖)
示例:
//,AMD
require(['./utils','a','b'],,function(utils) {
console. log(1)
//还没有用到 utils ab:等模块, 但是AMD,已经初始化 了所有模块
console. Log(2)
utils. add(1, 2)
});
//CMD
define ( function( require, exports, module){
console. log(1)
if(false){
var : utils = require(' ./utils')://需要时再 ,require,
执行就不会加载
utils. add(1, 2)
})
UMD(Universal Module Definition:通用模块定义)
示例:
// utils.js文件同上
(function(root, factory) ,{
if : (typeof define === ' function' && define . amd) {
/ /AMD
define(['utils'],,factory);
} else if (typeof exports === 'object') {
/ /CommonJS
var utils = require( 'utils' );
module. exports = factory(utils);
}else,{
root. result = factory( root.utils);
,}
}(this,,function(utils) {
utils. add(1,, 2)
}))
CommonJS 与 ES6 的区别
1.CommonJS模块输出的是一一个值的拷贝,ES6 模块输出的是值的引用
示例:
js
// utils.js,文件
var.count=0
function add(a, ,b) {
console. log(a + b)
count++
}
module. exports,= {add, count}
// main.js :文件
var,utils = require('./utils')
utils.add(1, 2)
console. Log (utils.count) //.0
2. CommonJS模块是运行时加载,ES6 模块是编译时输出接口。
因为CommonJS加载的是一一个对象(即module.export属性) ,该对象只有在脚本运行完才会生成。
而ES6模块不是对象,它的对外接口只是一种静态定义,在代码静态解析阶段就会生成。