什么是ES6模块?
在ES6中，每一个文件就是一个模块，有本身的作用域。在一个文件内里定义的变量、函数、类，都是私有的，对其他文件不可见。在看到这里的时刻以为很熟悉，这不就是匿名函数自实行，然后一个个匿名函数放在一个个文件中的么，一个模块就是一个放在文件中的匿名自实行函数。二者对照就像下面如许:
// add.js
(function(window){
function add(a, b) {
return a + b;
}
window.add = add // 经由过程window对象把 add 函数向外开放
})(window)而运用ES6的模块, 就像下面
// add.js
function add(a, b) {
return a + b;
}
export default add; // 经由过程export 导出 add要领固然了，ES6的模块肯定是比匿名函数自实行越发高等的一种封装了。比拟于匿名函数，ES6模块具有下面几种特征。
1. ES6默许运用严厉形式, 而不须要运用 "use strict"
2. ES6模块是编译时加载，对代码举行静态剖析
3. 对外抛出接口的时刻，不会污染全局的对象
4. 能够有用的处置惩罚依靠， 而且只会在第一次加载模块时，代码运转一次。背面再次加载，不会反复 运转，会从缓存中读取
……临时这些，今后待补充
至于为何时刻ES6的模块发生的汗青就不议论，收集上许多。个人以为邃晓了它的汗青就能够更好的邃晓它的特征。
export 与 import
说到模块，就须要想到两点，一个是模块的对外接口，背面文章中运用导出来示意，别的一个是引入其他模块的接口，背面文章中运用导入来示意。
export敕令用于划定模块的
导出，
import敕令用于模块的
导入。
重头戏就来了，怎样更好更快的明白模块的导出与导入。
当模块引入其他模块的时刻，最终是猎取其模块导出的值(基础数据范例或许援用范例)。因而能够如许去明白，当我们引入的模块(文件)已肯定下来了，那末导入的值也就肯定下来。
// add.js
function add(a, b) {
return a + b;
}
export default add
// main.js
import add from './add.js'
add(1,2) // 3 上面导入的是 add.js 这个模块，实在主如果把add.js 中的 add 函数举行引入。
当须要到导入多个值的时刻，能够经由过程对象来返回多个所须要的值。
// util.js
function add(a, b) {
return a + b;
}
function reduce(a, b) {
return a - b;
}
// 经由过程对象来返回多个值
export default {add: add, reduce: reduce};
// main.js
import util from './util.js'
console.log(util) // {add: add, reduce: reduce}到这里，我个人以为模块的导入和导出基础上就已很好了。由于如许不管是导出照样导入，对接的接口都是简朴轻易。
固然这只是我以为。照样上面的例子
// util.js
function add(a, b) {
return a + b;
}
function reduce(a, b) {
return a - b;
}
export default {add: add, reduce: reduce, name: 'util'}
// main.js
import util from './util.js'
util.add(1, 2) // => 3
util.reduce(4, 3) // => 1
util.name // => 'util'有人说，当导入的是值是对象的时刻，须要屡次去运用对象猎取属性。 就像上面须要屡次运用util去猎取属性。ES6中不是有解构赋值么，用来处置惩罚对象屡次猎取属性的题目，那末导入对象的时刻，也能够如许去处置惩罚。
因而根据对象的解构赋值，对上面的 main.js 转变。
// main.js
import {add: addFn} from './util.js'
// 这里在`webpack`中编译就已报错了, ES6模块不支持这类体式格局
// 运用别的一种解构体式格局，`导出`模块的属性名与`导入`的变量名一致
// main.js
import { add } from './util.js'
console.log(add) // undefined
// 这里在`webpack`编译中没有报出毛病，然则另有正告: "export 'add' was not found
// 因而对 util.js 的`导出`举行转变
//util.js
function add(a, b) {
return a + b;
}
function reduce(a, b) {
return a - b;
}
export {add, reduce, name: 'util'}
// 当修正完util.js 就完成了util.js模块`导出` 与 main.js模块的`导入`对接模块的导入与导出大抵能够分为两种形式
1. default 形式
default 形式下，模块中导出的值能够运用任何范例(不管是基础范例照样援用范例)，都能够对外输出。而导入的此模块也是很简朴，供应一个吸收的变量就能够（引荐这类形式）
例子以下:
// util.js
function add(a, b) {
return a + b;
}
function reduce(a, b) {
return a - b;
}
const obj = { add, reduce };
export default obj;// main.js
import util from './util.js';
// util 是能够变更恣意称号
console.log(util)// => {add: ƒ, reduce: ƒ}2. { xxx } 形式
{ xxx } 是不须要在模块导出的时刻运用default的。然则这类体式格局下，导出的值一定是object的。
而导入的模块时是须要运用 { xxx }来吸收。而且吸收的变量称号还必须与导出模块属性名的一样。
例子以下:
// util.js
function add(a, b) {
return a + b;
}
function reduce(a, b) {
return a - b;
}
let obj = { add, reduce };
// export obj; //webpack 编译报错
export { add, reduce }; // 除了如许直接导出对象，还能够像下面如许
export let name = 'util';
// 与 export { name } 结果一样;深切相识的话，二者照样能够一同合用
function add(a, b) {
return a + b;
}
function reduce(a, b) {
return a - b;
}
export let name = 'util';
export { add, reduce };
// 相当于把这些属性兼并在一同// main.js
import { add, reduce, name } from './util.js'
console.log(add) // add(a, b) { return a + b; }
console.log(name) // util as 重命名
as 重命名主如果用于 { xxx }形式。由于在导出的时刻，属性名是被肯定下来，而在导入此模块的时刻，变量名须要跟此属性名一样才猎取对应的值。而运用 as 不仅能够协助导出模块把属性名重命名，也能够帮导入模块把吸收的变量名举行重命名。
例子以下:
// util.js
function add(a, b) {
return a + b;
}
export { add as addFn};// main.js
import { addFn as add } from './util.js'
console.log(add) // add(a, b) { return a + b; }上面是个人关于ES6的模块个人明白和学习心得。
别的想要深切相识的能够检察官方文档 http://www.ecma-international…
