前端模块化标准“ES6 Modul总结“

由于js文件中的全局变量可以相互调用，在多文件多变量中，容易将未知的已定义的变量重复值，因此模块化的 “分而治之” 的思想有了前景意义。

常用的模块化标准：Common.js、Es6 Modul、AMD、CMD’UMD。

模块化的出现，避免了变量的污染和命名冲突，使依赖更容易管理。

ES6 Moudl

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

1. export

export * from 'module'; //重定向导出 不包括 module内的default
export { name1, name2, ..., nameN } from 'module'; // 重定向命名导出
export { import1 as name1, import2 as name2, ..., nameN } from 'module'; // 重定向重命名导出

export { name1, name2, …, nameN }; // 与之前声明的变量名绑定 命名导出
export { variable1 as name1, variable2 as name2, …, nameN }; // 重命名导出

export let name1 = 'name1'; // 声明命名导出 或者 var, const，function， function*, class

export default expression; // 默认导出
export default function () { ... } // 或者 function*, class
export default function name1() { ... } // 或者 function*, class
export { name1 as default, ... }; // 重命名为默认导出

2. import

// 命名导出 module.js
let a = 1,b = 2
export { a, b }
export let c = 3

// 命名导入 main.js
import { a, b, c } from 'module'; // a: 1  b: 2  c: 3
import { a as newA, b, c as newC } from 'module'; // newA: 1  b: 2  newC: 3


// 默认导出 module.js
export default 1

// 默认导入 main.js
import defaultExport from 'module'; // defaultExport: 1


// 混合导出 module.js
let a = 1
export { a }
const b = 2
export { b }
export let c = 3
export default [1, 2, 3]

3. ES6 Module在浏览器中使用。

   你需要起一个Web服务器来访问，并且对 script 标签的 type 属性加上 module先定义两个模块

// index.js
import module from './module.js'
console.log(module) // 123

// module.js
export default 123
// 在html中内联调用

<!-- index.html -->
<script type="module">
  import module from './module.js'
  console.log(module) // 123
</script>

// 在html中通过 script 的 src 引用

<!-- index.html -->
<script type="module" src="index.js"></script>
// 控制台 123