es6——export 和 import

什么是模块

ES6中的模块即使一个包含JS代码的文件，在这个模块中所有的变量都是对其他模块不可见的，除非我们导出它。ES6的模块系统大致分为导出（export）和导入（import）两个模块。

---

模块导出 ( export )

你可以导出所有的最外层函数、类以及var、let或const声明的变量。
ES6模块只支持静态导入和导出，你只可以在模块的最外层作用域使用import和export，不可在条件语句中使用，也不能在函数作用域中使用import。所有导出的标识符一定要在源代码中明确地导出它们的名称，

ES6的导出分为名字导出和默认导出

名字导出

名字导出可以在模块中导出多个声明。

// lib.js
export let userName = 'tom';   // 导出一个变量
export let add = ( a, b ) => {   // 导出一个函数
    return a + b;
}
export let o = {   //导出一个对象
    userName: 'tom',
    age: 22,
    likes: 'song'
}

// main.js  
import { userName, add, o } from "./first";   // 导入一个模块
console.log( userName, add( 10, 20 ), o.likes );    // tom 30 song

//这样导入的变量名必须和导出的名称一致。

以上对于每一个要导出的变量都加了export，我们也可以直接导出一个列表，例如：

// lib.js
let userName = 'tom';
let add = ( a, b ) => {
    return a + b;
};
let o = {
    userName: 'tom',
    age: 22,
    likes: 'song'
};
export { userName, add, o };   // 导出一个列表

// main.js
import { userName, add, o } from "./first";   // 导入一个模块
console.log( userName, add( 10, 20 ), o.likes );    // tom 30 song

export列表可以在模块文件最外层作用域的每一处声明，不一定非要把它放在模块文件的末尾,例如：

// lib.js
let userName = 'tom';
export { userName };   // 只导出一个变量
let add = ( a, b ) => {
    return a + b;
};
let o = {
    userName: 'tom',
    age: 22,
    likes: 'song'
};

//main.js
import { userName } from "./first";   // 导入一个模块
console.log( userName );    // tom

也可以直接导入整个模块,比如：

// first.js
let userName = 'tom';
let add = ( a, b ) => {
    return a + b;
};
let o = {
    userName: 'tom',
    age: 22,
    likes: 'song'
};
export { userName, add, o };

// main.js
import * as lib from "./first";   // 导入整个个模块
console.log( lib.userName, lib.add( 10, 20 ), lib.o.likes );    // tom 30 song

默认导出

一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致，这对于导出匿名函数或类非常有用，注意这里默认导出不需要用{},比如：

// add.js
export default function( a, b ){    // 导出一个匿名函数
    return a + b;
}

// main.js
import add from './first'
console.log( add( 10, 20 ) );   // 30

也可以使用混合的导出，比如：

// lib.js
export default function( a, b ){    // 导出一个匿名函数
    return a + b;
}
export function sayHello() {   // 导出一个普通函数
    console.log( 'hello~' );
}

// main.js
import add, { sayHello } from './first'
console.log( add( 10, 20 ) );   // 30
sayHello();   // hello~

---

重命名 export 和 import

默认情况下，导出和导入的命名必须一致，不一致就会出问题，比如：

// lib.js
var a = 'welcome es6~';
export { a }

// main.js
import { b } from './first'
console.log( b );  // undefined

为了解决导出命名冲突的问题，ES6为你提供了重命名的方法解决这个问题，当你在导入名称时可以这样做：

// first.js
export let aaa = 10;
// second.js
export let aaa = 20;

// 以上俩个模块都导出了以 aaa 命名的内容，要同时导入两者，我们至少要将其中一个的名称改掉。

// third.js
import { aaa as first_aaa } from './first';
import { aaa as second_aaa } from './second';
console.log( first_aaa, second_aaa );    // 10 20

同样，当你在导出的时候也可以重命名。你可能会想用两个不同的名称导出相同的值，这样的情况偶尔也会遇到：

// first.js
let a = 10;
let b = 20;
export {
    a as aaa,
    b as bbb,
    b as ccc
}

// second.js
import { aaa, bbb, ccc } from './first'
console.log( aaa, bbb, ccc );   // 10 20 20