ES6模块之export和import详解:https://blog.csdn.net/qq_28506819/article/details/75733601
ES6中的模块即使一个包含JS代码的文件，在这个模块中所有的变量都是对其他模块不可见的，除非我们导出它。ES6的模块系统大致分为导出（export）和导入（import）两个模块。
1、模块导出（export）
你可以
导出所有的最外层
函数、
类以及
var、
let或
const声明的变量。
ES6模块只支持静态导入和导出，你只可以在模块的最外层作用域使用
import和
export，不可在条件语句中使用，也不能在函数作用域中使用
import。所有导出的标识符一定要在源代码中明确地导出它们的名称，你不能通过编写代码遍历一个数组然后用数据驱动的方式导出一堆名称。如下导出是错误的。
-
function squre() {};
-
if(true) {
-
export {squre};
-
}
1、名字导出（name export）
名字导出可以在模块中导出多个声明。
-
//------ lib.js ------
-
export const sqrt = Math.sqrt;
-
export function square(x) {
-
return x * x;
-
}
-
export function add (x, y) {
-
return x + y;
-
}
-
-
//------ main.js ------
-
import { square, add } from 'lib';
-
console.log(square(10)); //100
-
console.log(add(2,4)); //6
-
//------ lib.js ------
-
const sqrt = Math.sqrt;
-
function square(x) {
-
return x * x;
-
}
-
function add (x, y) {
-
return x + y;
-
}
-
export {sqrt, square, add}
export列表可以在模块文件最外层作用域的每一处声明，不一定非要把它放在模块文件的末尾。
也可以直接导入整个模块，此时的main.js模块将变成这样。
-
//------ main.js ------
-
import * as lib from 'lib';
-
console.log(lib.square(10)); //100
-
console.log(lib.add(2,4)); //6
2、默认导出（default export）
一个模块只能有一个默认导出，对于默认导出，导入的名称可以和导出的名称不一致，这对于导出匿名函数或类非常有用。-
//------ myFunc.js ------
-
export default function() {...};
-
-
//------ main.js ------
-
import myFunc from 'myFunc';
-
myFunc();
当然也可以使用混合的导出。
-
//------ lib.js ------
-
export default function() {...};
-
export function each() {...};
-
-
//------ main.js ------
-
import _,{ each } from 'lib';
2、重命名export和import
为了解决导出命名冲突的问题，ES6为你提供了重命名的方法解决这个问题，当你在导入名称时可以这样做：
-
// 这两个模块都会导出以`flip`命名的东西。
-
// 要同时导入两者，我们至少要将其中一个的名称改掉。
-
import {flip as flipOmelet} from "eggs.js";
-
import {flip as flipHouse} from "real-estate.js";
-
function v1() { ... }
-
function v2() { ... }
-
-
export {
-
v1 as streamV1,
-
v2 as streamV2,
-
v2 as streamLatestVersion
-
};
-
import { default as foo } from 'lib';
-
import foo from 'lib';
-
//------ module1.js ------
-
export default 123;
-
-
//------ module2.js ------
-
const D = 123;
-
export { D as default };
3、作为中转模块导出
有时候为了避免上层模块导入太多的模块，我们可能使用底层模块作为中转，直接导出另一个模块的内容如下：
-
//------ myFunc.js ------
-
export default function() {...};
-
-
//------ lib.js ------
-
export * from 'myFunc';
-
export function each() {...};
-
-
//------ main.js ------
-
import myFunc,{ each } from 'lib';
这样main.js只需导入lib模块即可，虽然myFunc模块从lib模块导出，但是lib却不能使用myFunc模块的内容。
参考链接：