概述

前端发展之初存在的问题

既然JS也能编写大型应用，那么自然也需要像其他语言那样有解决复杂问题的开发框架
- Angular、React、Vue等前端开发框架出现
- Express、Koa等后端开发框架出现
- 各种后端数据库驱动出现
要开发大型应用，自然少不了各种实用的第三方库的支持
- npm包管理器出现，实用第三方库变得极其方便
- webpack等构建工具出现，专门用于打包和部署
既然JS可以放到服务器环境，为什么不能放到其他终端环境呢？
- Electron发布，可以使用JS语言开发桌面应用程序
- RN和Vuex等技术发布，可以使用JS语言编写移动端应用程序
- 各种小程序出现，可以使用JS编写依附于其他应用的小程序
- 目前还有很多厂商致力于将JS应用到各种其他的终端设备，最终形成大前端生态

为了保证高效的执行，仅加载必要的模块。nodejs只有执行到require函数时才会加载并执行模块
为了隐藏模块中的代码，nodejs执行模块时，会将模块中的所有代码放置到一个立即执行函数中执行，以保证不污染全局变量。
为了保证顺利的导出模块内容，nodejs做了以下处理
- 在模块开始执行前，初始化一个值module.exports = {}
- module.exports即模块的导出值
- 为了方便开发者便捷的导出，nodejs在初始化完module.exports后，又声明了一个变量exports = module.exports

(function(module){
  module.exports = {};
  var exports = module.exports;
  //模块中的代码
  return module.exports;
})()

当使用require(模块路径)导入一个模块时，node会做以下两件事情（不考虑模块缓存）：
1. 通过模块路径找到本机文件，并读取文件内容
2. 将文件中的代码放入到一个函数环境中执行，并将执行后module.exports的值作为require函数的返回结果
CommonJS是同步的，必须要等到加载完文件并执行完代码后才能继续向后执行
当浏览器遇到CommonJS
1. 浏览器要加载JS文件，需要远程从服务器读取，而网络传输的效率远远低于node环境中读取本地文件的效率。由于CommonJS是同步的，这会极大的降低运行性能
2. 如果需要读取JS文件内容并把它放入到一个环境中执行，需要浏览器厂商的支持，可是浏览器厂商不愿意提供支持，最大的原因是CommonJS属于社区标准，并非官方标准

要在浏览器中实现模块化，只要能解决上面的两个问题就行了
解决办法其实很简单：
1. 远程加载JS浪费了时间？做成异步即可，加载完成后调用一个回调就行了
2. 模块中的代码需要放置到函数中执行？编写模块时，直接放函数中就行了
基于这种简单有效的思路，出现了AMD和CMD规范，有效的解决了浏览器模块化的问题。

全称是Asynchronous Module Definition，即异步模块加载机制
require.js实现了AMD规范
在AMD中，导入和导出模块的代码，都必须放置在define函数中

全称是Common Module Definition，公共模块定义规范
sea.js实现了CMD规范
在CMD中，导入和导出模块的代码，都必须放置在define函数中

浏览器使用以下方式引入一个ES6模块文件

<script src="入口文件" type="module">

export 声明表达式或 export {具名符号}

import {导入的符号列表} from “模块路径”
import {name as name2} from “模块路径”
注意：
1. 导入时，可以通过关键字as对导入的符号进行重命名
2. 导入时使用的符号是常量，不可修改
3. 可以使用星号导入所有的基本导出，形成一个对象，使用*号必须要重命名