Es6/CommonJs/AMD模块系统的差异以及用法

参考链接：https://www.cnblogs.com/chinabin1993/p/10565816.html#03-AMD

一、什么是模块化？

　　在js出现的时候，js一般只是用来实现一些简单的交互，后来js开始得到重视，用来实现越来越复杂的功能，而为了维护的方便，我们也把不同功能的js抽取出来当做一个js文件，但是当项目变的复杂的时候，一个html页面可能需要加载好多个js文件，而这个时候就会出现各种命名冲突，如果js也可以像java一样，把不同功能的文件放在不同的package中，需要引用某个函数或功能的时候，import下相关的包，这样可以很好的解决命名冲突等各种问题，但是js中没有模块的概念，又怎么实现模块化呢

　　模块化开发是一种管理方式，是一种生产方式，一种解决问题的方案，一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块，但是模块开发需要遵循一定的规范，否则就都乱套了，因此，才有了后来大家熟悉的AMD规范，CMD规范，CommonJs规范

　　CommonJs/ES6/AMD等等叫法只是一种规范，不用的规范中，模块化有不同的实现方式

二、模块加载方式

1. ES6
2. CommonJs
3. AMD
4. CMD

（1）ES6规范

参考地址：阮一峰老师讲解的 ES6规范

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。

用法：

　　模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。

export const one = '这是第一种导出方法'
const two = '这是第二种导出方法'
export {two} //这是第二种导出方法 {two}是ES6的简写 等于 {two:two}
function three(){
  console.log('这是第三种导出的方法')
}
export {three}
// 或者
// export function three(){
//   console.log('这是第三种导出的方法')
// }

需要特别注意的是，export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。

const four = '这是错误的方法'
export four //错误
export 1 //错误

另外，export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

export let five = '这是第五种导出的方法'
setTimeout(() => {
  five = '第五种'
}, 5000);

上面代码输出 这是第五种导出的方法，后面就变成了第五种

 

运行时可能会报错，Warning: To load an ES module, set "type": "module" in the package.json 

解决方法：https://blog.csdn.net/weixin_44505553/article/details/108830616

是要配置package.json

这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存，不存在动态更新，详见CommonJs规范

 最后，export命令可以出现在模块的任何位置，只要处于模块顶层就可以。如果处于块级作用域内，就会报错，import命令也是如此。这是因为处于条件代码块之中，就没法做静态优化了，违背了 ES6 模块的设计初衷。

function foo() {
  export default 'bar' // SyntaxError
}
foo()

上面代码中，export语句放在函数之中，结果报错。