Javascript 模块化简介

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模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。