在ES6中，增加了模块化操作。模块化操作主要包括两个方面。
- export：模块的输出操作，它可以让我们把变量，函数，对象进行模块化，提供外部调用接口，让外部进行引用。
- import：模块的引入操作，export输出的变量等，可以通过import进行引入。
1.单变量的输出
先来看个最简单的例子，把一个变量模块化。我们新建一个temp.js文件，然后在文件中输出一个模块变量。
//temp.js
var a = 'js';
export {a};
然后可以在index.js中以import的形式引入。
import {a} from './temp.js';
console.log(a); //js
这就是一个最简单的模块的输出和引入。
2.多变量的输出
这里声明了3个变量，需要把这3个变量都进行模块化输出，这时候我们给他们包装成对象就可以了。
var a ='js';
var b ='js1';
var c = 'js2';
export {a,b,c}
然后
import {a,b,c} from './temp.js';
console.log(a,b,c); //js js1 js2
3.函数的模块化输出
var add=function(a,b){
return a+b;
}
export {add};
然后
import {add} from './temp';
console.log(add);
//ƒ add(a, b) {
return a + b;
}
注：
- .js路径可以省略
- 如果引入的js和输出的js在同级，需要加./，否则报错找不到。
4.as的用法
有些时候我们并不想暴露模块里边的变量名称，而给模块起一个更语义话的名称，这时候我们就可以使用as来操作。
- as后面跟的是新名称。
var a = 'js';
var b = 'js1';
var c = 'js2';
export {
a as x,
b as y,
c as z
}
console.log(x,y,z)// js js1 js2
console.log(a) //报错 a is not defined
-
同理import引入也可使用as
var a = 'js'; var b = 'js1'; var c = 'js2'; export { a, b, c } import {a as x，b as y,c as z} from '路径'
5.* 号的用法（模块的整体加载）
有时候我们可能会导出多个对象，当我们引入的时候，还得一个个引入，如果我们想全部引入怎么办。即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
const Test = () => {
return (
<h1>Hello, world</h1>
)
}
var a = 'js';
var b = 'js1';
var c = 'js2';
//导出
export {a as x, b as y, c as z}
export {Test};
//引入
import * as test from '路径';
console.log(test); // {x: "js", y: "js1", z: "js2", Test:Test函数}
这样我们使用的时候直接使用test.属性即可。
6.export default的使用
我们经常会导出多个模块，有时候，我们会有一个默认的模块导出。
var a='js';
var b='js1';
export default a;
export {b};
import str from './greeter.js';
import {b} from './greeter.js';
console.log(str,b); //js js1
注：使用默认模块时
- import命令,export后面，不使用大括号
- 一个模块只能有一个默认输出
- import时，我们可以为该模块取任意名称。
