随着项目复杂度的升高，项目代码量会变得越来越大，由此引发的几个问题非常令人头疼，例如变量名冲突，全局变量污染，代码太长难以维护等等。为了解决这些问题，模块化由此诞生。那到底什么是模块化、模块化开发呢？

模块化开发，就是将程序划分成一个个小的结构，这个结构中编写属于自己的逻辑代码，有自己的作用域，定义变量名词时不会影响到其他的结构；这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用，也可以通过某种方式，导入另外结构中的变量、函数、对象等；

早期，javascript社区自发出现了一些模块化规范，例如CommonJS、AMD、CMD等，直到2015年，ES6推出了官方的模块化方案，ESModule，截至目前，用的最多的模块化规范就是CommonJS和ESModule，下面我将逐一介绍这些规范的内容以及使用方法。

1.CommonJS

CommonJS是一个规范，最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS，后来为了体现它的广泛性，修改为CommonJS，平时我们也会简称为CJS。

在这里还得提一下Node，Node中对CommonJS进行了支持和实现，让我们在开发node的过程中可以方便的进行模块化开发：

在Node中每一个js文件都是一个单独的模块；

这个模块中包括CommonJS规范的核心变量：exports、module.exports、require；

我们可以使用这些变量来方便的进行模块化开发；

1.1 exports 导出

exports是一个对象，我们可以在这个对象中添加很多个属性，添加的属性会导出；

另外一个文件中可以导入：

上面这行完成了什么操作呢？理解下面这句话，Node中的模块化一目了然

 意味着main中的bar变量等于exports对象；

 也就是require通过各种查找方式，最终找到了exports这个对象；

 并且将这个exports对象赋值给了bar变量；

 bar变量就是exports对象了；

1.2 module.exports

Node中我们经常导出东西的时候，又是通过module.exports导出的：module.exports和exports有什么关系或者区别呢？

 CommonJS中是没有module.exports的概念的；

 但是为了实现模块的导出，Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是module；

 所以在Node中真正用于导出的其实根本不是exports，而是module.exports；

 因为module才是导出的真正实现者；

在真实的开发中，实际是这样写的：

module.exports={ name, age }

1.3 require

首先，我们知道，require是一个函数，可以帮助我们引入一个文件（模块）中导出的对象。那么，require的查找规则是怎么样的呢？ 这里我总结比较常见的查找规则：

导入格式如下：

require(X)

情况一：X是一个Node核心模块，比如path、htt，直接返回核心模块，并且停止查找
情况二：X是以 ./ 或 ../ 或 /（根目录）开头的

第一步：将X当做一个文件在对应的目录下查找；

 1.如果有后缀名，按照后缀名的格式查找对应的文件

 2.如果没有后缀名，会按照如下顺序：
```
   1> 直接查找文件X

   2> 查找X.js文件

   3> 查找X.json文件

   4> 查找X.node文件
   
```
第二步：没有找到对应的文件，将X作为一个目录查找目录下面的index文件
```
   1> 查找X/index.js文件

   2> 查找X/index.json文件

   3> 查找X/index.node文件
   
```
如果没有找到，那就会报错，not found
情况三

当我们require的内容既不是node核心模块，又不是以目录开头，那么require会去node_modules 这个存放依赖的文件夹下寻找相关内容

1.4 node模块加载的过程

模块在被第一次引入时，模块中的js代码会被运行一次
模块被多次引入时，会缓存，最终只加载（运行）一次

为什么只会加载运行一次呢？

这是因为每个模块对象module都有一个属性：loaded。

为false表示还没有加载，为true表示已经加载；
如果有循环引入，那么加载顺序是什么？

这个其实是一种数据结构：图结构；

 图结构在遍历的过程中，有深度优先搜索（DFS, depth first search）和广度优先搜索（BFS, breadth first search）；

 Node采用的是深度优先算法：main -> aaa -> ccc -> ddd -> eee ->bbb

1.5 CommonJS规范缺点

2 ES module

2.1 导入导出

在html中导入时，我们需要在script标签加上 module修饰符

在JS中导入导出，使用的是export和import关键字，前者负责模块的导出，后者负责模块的导入了，如果在浏览器运行上图的模块化导入，需要提供服务环境，例如live server插件。

2.2 export导出

导出方式1：

导出方式2：通过as给name起一个别名，防止导入这个模块的文件中也有name，造成命名冲突

导出方式3，在定义数据或者函数的时候就可以导出

2.3 import 导入

方式一：import {标识符列表} from '模块'；

 注意：这里的{}也不是一个对象，里面只是存放导入的标识符列表内容；

◼ 方式二：导入时给标识符起别名

 通过as关键字起别名

◼ 方式三：通过 * 将模块功能放到一个模块功能对象（a module object）上

2.4export和import结合使用

为什么要这样做呢？

 在开发和封装一个功能库时，通常我们希望将暴露的所有接口放到一个文件中；

 这样方便指定统一的接口规范，也方便阅读；

 这个时候，我们就可以使用export和import结合使用

2.5 import函数

通过import加载一个模块，是不可以在其放到逻辑代码中的，为什么会出现这个情况呢？

这是因为ES Module在被JS引擎解析时，就必须知道它的依赖关系；
由于这个时候js代码没有任何的运行，所以无法在进行类似于if判断中根据代码的执行情况；
甚至拼接路径的写法也是错误的：因为我们必须到运行时能确定path的值；

但是有些情况下，我们需要在某些条件成立的情况下，才会去导入一些模块，条件不成立就直接不需要导入了，那这种情况该如何实现呢，这时候就需要用到import函数，如下图所示，使用import函数，直接把模块路径当做参数传进函数里面，函数的返回值是一个Promise对象，我们直接使用Promise的一系列操作取得最终结果即可。

【模块化】CommonJS 和 ES module