一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。
1.Commonjs
导出：module.exports
导入：require
特点：
- node.js就是用的CJS模块方式。
- 在浏览器中无效，必须经过打包才能在浏览器中执行。
- 是同步操作文件的
// importing
const doSomething = require('./doSomething.js')
// exporting
module.exports = function doSomething(n) {
// do something
}
2.AMD
语法：define
- 浏览器所使用的就是amd
- 是异步加载模块的
define((function () { 'use strict';
function substract(a, b) {
return a - b;
}
console.log(substract(5, 3));
}));
3.UMD
主要是作为一个兼容模式，兼容amd和cjs，这也是很多类库打包的加载方式，观察打包过后的umd格式，你会发现它主要是做了一个环境判断，浏览器中具有define函数,并且define.amd存在，就使用define异步加载代码中某些模块，如果没有说明在cjs环境中，就同步操作
(function (factory) {
typeof define === 'function' && define.amd ? define(factory) :
factory();
})((function () { 'use strict';
function substract(a, b) {
return a - b;
}
console.log(substract(5, 3));
}));
4.ESM(es module)
导出：export
导入：import
特点：是js推出的新模块化规范，ESM具有简单语法、异步加载等以及Tree-shakeable的特点。现在nodejs14也支持es module语法了，很多npm包之前可能存在cjs规范，现在都改成esm规范。存在部分浏览器兼容性，nodejs低版本兼容性，这种时候使用的umd格式最好
define((function () { 'use strict';
function substract(a, b) {
return a - b;
}
console.log(substract(5, 3));
}));
5.iife
一个自动执行的功能，适合作为<script>标签。（如果要为应用程序创建一个捆绑包，您可能想要使用它，因为它会使文件大小变小。）
出现原因：在es6没提出块级作用域的时候，js只有全局作用域，函数作用域，iife其实就是如下面代码的立即执行函数，只是用了函数做了下隔离
(function () {
'use strict';
function add(a, b) {
return a + b;
}
function substract(a, b) {
return a - b;
}
console.log(add(1, 2));
console.log(substract(5, 3));
})();
6.SystemJS
Systemjs是一个可配置模块加载器，为浏览器和NodeJs启用动态的Es模板加载器。任何具有标准的URL都可被加载为一个模块：
<script src="system.js"></script>
<script>
// 加载相对于当前地址的url
SystemJS.import('./local-module.js');
// 加载绝对url的地址
SystemJS.import('https://code.jquery.com/jquery.js');
</script>
