模块规范：AMD、CMD、ESM 、CommonJS

前言

对前端模块化规范做的一点笔记

什么是模块化？

或根据功能、或根据数据、或根据业务，将一个大程序拆分成互相依赖的小文件，再用简单的方式拼装起来。

模块化要解决的问题：

• 如何包装一个模块的的代码，使之不污染模块外的代码；
• 如何唯一标识一个模块；
• 如何在不增加全局变量的情况下将模块的 API 暴露出去；

AMD

• JS 的模块化规范，也主要应用于浏览器端
• 异步模块规范
• AMD 是 RequireJS 在的推广和普及过程中被创造出来
• 运行时加载，即脚本代码在 require 的时候，会全部执行，确定模块之间的依赖关系。
• 采用require()语句加载模块，但是不同于CommonJS，它要求两个参数。(第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。)

require(['./math', './utils'], function (math, utils) {
    math.add(2, 3);
    utils.request();
});

CMD

• JS 的模块化规范，也主要应用于浏览器端
• 同步模块规范
• CMD 是 SeaJS 在的推广和普及过程中被创造出来
• 运行时加载，即脚本代码在 require 的时候，会全部执行，确定模块之间的依赖关系。
• 与AMD比较两者的区别：CMD 推崇依赖就近，AMD 推崇依赖前置

// AMD
// 依赖必须一开始就写好
// AMD 也支持依赖就近，但 RequireJS 作者和官方文档都是优先推荐依赖前置写法。
define(['./utils'], function(utils) {
  utils.request();
});

// CMD
define(function(require) {
  // 依赖可以就近书写
  var utils = require('./utils');
  utils.request();
});

CommonJS

前面说了， AMD、CMD 主要用于浏览器端，随着 node 诞生，服务器端的模块规范 CommonJS 被创建出来。

• node 的模块化规范，也主要应用于服务器端
• 同步模块规范
• 使用 module.exports 来暴露模块，使用 require() 来引用模块
• 运行时加载，即脚本代码在 require 的时候，会全部执行，确定模块之间的依赖关系。

// 暴露模块：
const students = {};
const teachers = {};
module.exports = {
    students,
    teachers
};

// 引用模块：
// 引用的整个模块会初始化为一个Module对象；
const { teachers } = require('./info.js'); 

模块内 module、exports、module.exports、require() 的含义:

• module 是在模块内指向模块对象本身的一个引用；
• module.exports 是 module 一个属性；属性值包含的是模块对外输出的值；
• exports 是指向 module.exports 的一个变量；
• require()是用来加载模块的函数；返回的就是被加载模块的 module.exports；
  require() 引用模块的原理:1. require 命令第一次加载脚本文件，会执行整个脚本文件，然后在内存中生成一个对象；2.以后再次使用到这个模块时，会从缓存中找到第一次生成的那个对象；
  
  

ESM（ES6 module）

AMD 、 CMD 等都是在原有JS语法的基础上二次封装的一些方法来解决模块化的方案，ES6 module（在很多地方被简写为 ESM）是语言层面的规范，ES6 module 旨在为浏览器和服务器提供通用的模块解决方案。长远来看，未来无论是基于 JS 的 WEB 端，还是基于 node 的服务器端或桌面应用，模块规范都会统一使用 ES6 module。

• 编译时加载或叫做（“静态加载”），即是在编译时（import()是运行时加载）处理模块依赖关系
• 利用编译时加载，可以对代码做很多之前无法完成的优化：
   1. 在开发阶段就可以做导入和导出模块相关的代码检查。
   2. 结合 Webpack、Babel 等工具可以在打包阶段移除上下文中未引用的代码（dead-code），这种技术被称作“tree shaking”，可以极大的减小代码体积、缩短程序运行时间、提升程序性能。
• 导出接口使用export关键字，导入接口使用import关键字。

// 导出
// config.js
const prefix = 'https://github.com';
const api = `${prefix}/ronffy`;
export {
  prefix,
  api,
}
// 导入
import { api as myApi } from './config.js';

_{使用import()实现按需加载：}

function foo() {
  import('./config.js')
    .then(({ api }) => {

    });
}

const modulePath = './utils' + '/api.js';
import(modulePath);

参考文献：
https://fe.ecool.fun/topic/8ecafda7-0ae6-40bd-b8c6-385d02fa7165?orderBy=updateTime&order=desc&tagId=10
https://juejin.cn/post/7003285499628486670