ES6模块化

在之前的 javascript 中一直是没有模块系统的，前辈们为了解决这些问题，提出了各种规范, 最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。而 ES6 中提供了非常容易使用的模块系统，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

CommonJS: 服务器

AMD：浏览器 requirejs

CMD：浏览器 seajs

基本使用

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

es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能

// a.js
export const name = 'hucc'
export const age = 18
export const desc = '很帅'

使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）

//main.js
import {name, age, desc} from './a.js'
console.log('从模块内部导出的内容:', name, age, desc)

export详解

上面介绍了模块化最基础的用法，export 不止可以导出函数，还可以导出对象，数组，字符串等等

//a.js
export const name = 'hucc'
export const arr = [1, 2, 3]
export const obj = {
  name: 'zs',
  age: 18
}

export的写法，除了像上面这样，还有另外一种。

//a.js
const name = 'hucc'
const arr = [1, 2, 3]
const obj = {
  name: 'zs',
  age: 18
}

//	优点：上面代码在export命令后面，使用大括号指定所要输出的一组变量。它与前一种写法是等价的，但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。 
export {name, arr, obj}

默认导出

export default 指定默认输出, import 无需知道变量名就可以直接使用

//a.js
export default function fn () {
  console.log('哈哈')
}

//main.js
//在导入时，可以随意的使用变量名来接收
import a from './a'
a()

注意：export default是非常用的语法，用的很多, 以一些常用的模块为例

import $ from 'jQuery'   // 加载jQuery 库
import _ from 'lodash'   // 加载 lodash
import moment from 'moment' // 加载 moment

import详解

import 为加载模块的命令，基础使用方式和之前一样

//main.js
import {name, arr, user} from './a'

//如果是export default导出的内容
import a from './a'

兼容性说明

上面介绍了，es6 中模块的使用方式，但是现在es6的模块化，无论在浏览器端还是 node.js 上都没有得到很好的支持，所以需要，一些转码的工具（babel）。使我们可以用es6的方式来编码，最后输出es5的代码。

ES6模块化详解