1.export和import的正常用法
export 变量
// ./module/example.js export var firstName = 'roger'; export const lastName = 'waters'; export let dob = 1944; // index.js import {firstName, lastName, dob} from './module/example.js';
export方法
// ./module/example.js //定义方法的时候，就可以export export function sum(a, b) { return a + b; } function multiply(a, b) { return a * b; } //也可以先定义，再export export { multiply };
在别的文件里面import上面2个方法，是一样的
//./index.js import {sum, multiply} from './module/example.js';
export重命名
有时候你也许不想用一个变量，方法，类的原本的名字，而是想换一个别的名字。那么你可以使用 as 而且在export和import的时候都可以，例如:
// ./module/example.js function sum(a, b) { return a + b; } export {sum as add}; //./index.js import {add} from './module/example.js';
import重命名
在第三点里面，我们看到了可以在export的时候重命名变量。同样的效果，也可以在import的时候做，依然是用as：
// ./module/example.js function sum(a, b) { return a + b; } export {sum}; //./index.js import {sum as add} from './module/example.js'; //此时在index.js里面可以被使用的方法是add()，而不是sum()
export default
我们可以给一个js module制定默认值，也就是这里的default。导出一个default和前面我们讲到的导出一个变量一样也是有三种方式：
1. 在定义的时候export
//./module/example.js export default function(a, b) { return a + b; } //./index.js import sum from './module/example.js';
export的可以是一个匿名函数，在导入的时候，用任意合理的名字代表默认导出，但是注意与非default变量的区别在于，这里没有花括号({})
2. 先定义再export
//./module/example.js function sum(a, b) { return a + b; } export default sum; //./index.js import sum from './module/example.js';
在import的时候，依然可以是任意的合理的变量名，不一定得是sum
3. 使用 as
//./module/example.js function sum(a, b) { return a + b; } export {sum as default} //./index.js import sum from './module/example.js';
在import的时候，依然可以是任意的合理的变量名，不一定得是sum
export default和其他变量一起
一个module可以export default的同时export其他变量，语法与只export其中一样没有区别；只是在import的时候，default一定要在非default前：
//./module/example.js export var firstName = 'roger'; export const lastName = 'waters'; export let dob = 1944; function sum(a, b) { return a + b; } export {sum as default} // ./index.js //语法正确 import sum, {firstName, lastName, dob} from './module/example.js'; //error: 语法错误 import {firstName, lastName, dob}, sum from './module/example.js';
import *
当我们想把一个module所有export的东西都一次性import的时候，就可以使用 import * as
// ./module/example.js export var firstName = 'roger'; export const lastName = 'waters'; export let dob = 1944; function sum(a, b) { return a + b; } export {sum as default} //./index.js import * as example from './module/example.js'; console.log(example.firstName); console.log(example.lastName); console.log(example.dob); example.default(1, 2);
export import
我们可以把从别的module导入的变量作为本module的导出。例如下面的例子./mian.js从./idnex.js导入变量firstName, 而firstName原本是./index.js从./module/example.js导入的：
//./module/example.js export var firstName = 'roger'; export const lastName = 'waters'; export let dob = 1944; function sum(a, b) { return a + b; } export {sum as default} //./index.js import {firstName} from './module/example.js'; export {firstName}; //./main.js import {firstName} from './index.js'
export和import的注意点可能的错误
1.在没有default的情况下，不能export匿名函数，前面我们讲到可以在定义一个函数的时候就export，但是这个函数不能是匿名函数，除非这个函数作为default导出
2.export和import都只能用在module的最高层scope， 不能在if…else，方法里，或者任何需要在runtime的时候才能确定下来的情况下，使用export和import
