这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战
前言
大家好哇，今天我们来谈谈ES6模块化，大神请绕道，因为本文基本摘自我刚入行时的笔记哦~
在之前的 javascript 中一直是没有模块系统的，前辈们为了解决这些问题，提出了各种规范, 最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。而 ES6 中提供了简单的模块系统，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。
基本使用
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个 变量，就必须使用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}
通过 as 改变输出名称
//a.js
const name = 'hucc'
const arr = [1, 2, 3]
const obj = {
name: 'zs',
age: 18
}
//通过as把obj的名字改成了user，导入时只能写 as 后的命名
export {name, arr, obj as user}
//main.js
import {name, arr, user} from './a.js'
console.log('读取的值：', name, arr, user)
上面的写法中，import 中需要指定加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。
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'
通过 as 命令修改导入的变量名
//main.js
import {name as n, arr, user} from './a'
加载模块的全部内容
//a.js
const name = 'hucc'
const arr = [1, 2, 3]
const obj = {
name: 'zs',
age: 18
}
export {name, arr, obj as user}
//math.js
//除了指定输出变量名或者 export.default 定义的导入， 还可以通过 * 号加载模块的全部.
import * as all from './a'
console.log(all.name)
console.log(all.arr)
console.log(all.user)
兼容性说明
上面介绍了，es6 中模块的使用方式，但是现在es6的模块化，无论在浏览器端还是 node.js 上都没有得到很好的支持，所以需要，一些转码的工具（babel），使我们可以用es6的方式来编码，最后输出es5的代码。
后记
你好哇，我是南极大冰块，一个技术与颜值成正比的前端工程师，崇尚一针见血的搞定前端问题，希望我的博客有帮助到了你。
关注我，前端路途一起走。嘿哈~😛
