CommonJS和ESModule

  这两个标准都是用来规范模块化的，它们的应用场景存在一些区别，CommonJS规范应用于node，ESModule规范通常应用于浏览器。在学习这两部分的具体应用之前，我们先来思考一个问题，为什么需要模块化规范，回答这个问题之前，咱们需要先知道什么是模块化。

什么是模块化

  在html文件中如果只是将script标签通过src引入js文件，就相当于将所有的js文件都放到全局作用域下，这样只是形式上的分为不同的js文件，并没有实际上的模块化，仍然会产生变量命名冲突，代码耦合度过高等情况。模块化就是将不同的代码逻辑，功能点，区分出来形成不同的作用域，区分为互相独立的模块。将script的type属性值设置为module，可以实现js代码的模块化。

为什么要规范模块化

  在多人协作开发的过程中，需要可复用代码在模块之间进行传递，如果每个人在模块中导入和导出的方式都按自己的想法来实现，多人开发的效率就会大大降低，这个时候就需要规范来进行约束，大家都按照这个规范来进行开发，提高效率。

CommonJS的导入和导出方式

  在test文件夹下创建两个js文件，分别命名为main和foo，在foo中导出name属性，如下图：

  在main模块中导入foo模块的name属性，如下图：

ESModule的导入和导出方式

  在test文件下创建两个js文件，分贝命名为main和foo，再创建一个index.html文件，使用ESModule规范导出foo模块中的name属性，如下图：

  在main模块中导入foo模块的name属性，如下图：

  需要注意的是在ESModule中导入的文件名需要携带后缀名写全才能够正确的识别，而CommonJS中require函数能够自动去进行匹配补全操作。