在 30分钟控制ES6/ES2015核心内容（上）我们讲解了es6最经常运用的一些语法：let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
俗语说打铁要趁热，本日我们继承讲es6其他几个异常有效的新特征。
import export
这两个家伙对应的就是es6本身的module功用。
我们之前写的Javascript一向都没有模块化的系统，没法将一个巨大的js工程拆分红一个个功用相对自力但相互依靠的小工程，再用一种简朴的要领把这些小工程衔接在一同。
这有能够致使两个题目：
一方面js代码变得很痴肥，难以保护
另一方面我们经常得很注重每一个script标签在html中的位置，因为它们一般有依靠关联，递次错了能够就会出bug
在es6之前为处理上面提到的题目，我们得应用第三方供应的一些计划，主要有两种CommonJS(服务器端)和AMD（浏览器端，如require.js）。
如果想相识更多AMD，尤其是require.js，能够参看这个教程：why modules on the web are useful and the mechanisms that can be used on the web today to enable them
而如今我们有了es6的module功用，它完成异常简朴，能够成为服务器和浏览器通用的模块处理计划。
ES6模块的设想头脑，是只管的静态化，使得编译时就可以肯定模块的依靠关联，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时肯定这些东西。
上面的设想头脑看不懂也没紧要，咱先学会怎样用，等以后用多了、熟练了再去研讨它背地的设想头脑也不迟！好，那我们就上代码…
传统的写法
起首我们回忆下require.js的写法。假定我们有两个js文件: index.js和content.js,如今我们想要在index.js中运用content.js返回的效果，我们要怎样做呢？
起首定义：
//content.js
define('content.js', function(){
return 'A cat';
})
然后require：
//index.js
require(['./content.js'], function(animal){
console.log(animal); //A cat
})
那CommonJS是怎样写的呢？
//index.js
var animal = require('./content.js')
//content.js
module.exports = 'A cat'
ES6的写法
//index.js
import animal from './content'
//content.js
export default 'A cat'
以上我把三者都列出来了，妈妈再也不必忧郁我写殽杂了…
ES6 module的其他高等用法
//content.js
export default 'A cat'
export function say(){
return 'Hello!'
}
export const type = 'dog'
上面能够看出，export敕令除了输出变量，还能够输出函数，以至是类（react的模块基础都是输出类）
//index.js
import { say, type } from './content'
let says = say()
console.log(`The ${type} says ${says}`) //The dog says Hello
这里输入的时刻要注重：大括号内里的变量名，必需与被导入模块（content.js）对外接口的称号雷同。
如果还愿望输入content.js中输出的默认值(default), 能够写在大括号表面。
//index.js
import animal, { say, type } from './content'
let says = say()
console.log(`The ${type} says ${says} to ${animal}`)
//The dog says Hello to A cat
修正变量名
此时我们不喜欢type这个变量名，因为它有能够重名，所以我们须要修正一下它的变量名。在es6中能够用as完成一键换名。
//index.js
import animal, { say, type as animalType } from './content'
let says = say()
console.log(`The ${animalType} says ${says} to ${animal}`)
//The dog says Hello to A cat
模块的团体加载
除了指定加载某个输出值，还能够运用团体加载，即用星号（*）指定一个对象，一切输出值都加载在这个对象上面。
//index.js
import animal, * as content from './content'
let says = content.say()
console.log(`The ${content.type} says ${says} to ${animal}`)
//The dog says Hello to A cat
一般星号*连系as一同运用比较适宜。
最终秘笈
斟酌下面的场景：上面的content.js一共输出了三个变量（default, say, type）,如果我们的现实项目当中只须要用到type这一个变量，其他两个我们临时不须要。我们能够只输入一个变量：
import { type } from './content'
因为其他两个变量没有被运用，我们愿望代码打包的时刻也疏忽它们，扬弃它们，如许在大项目中能够明显削减文件的体积。
ES6帮我们完成了！
不过，现在无论是webpack照样browserify都还不支持这一功用…
如果你如今就想完成这一功用的话，能够尝试运用rollup.js
他们把这个功用叫做Tree-shaking，哈哈哈，意义就是打包前让全部文档树抖一抖，把那些并未被依靠或运用的东西一切抖落下去。。。
看看他们官方的诠释吧：
Normally if you require a module, you import the whole thing. ES2015 lets you just import the bits you need, without mucking around with custom builds. It’s a revolution in how we use libraries in JavaScript, and it’s happening right now.
未完待续
愿望更周全相识es6同伴们能够去看阮一峰所著的电子书ECMAScript 6入门
