一、export命令
1. 基本使用
export var firstName = 'Michael';
export var lastName = 'kaol';
export var age = '10'
或
var firstName = 'Michael';
var lastName = 'kaol';
var age = '10'
export {firstName,lastName,age};
2. export也可以输出函数和类
export function fun() {
return 'fun'
} // 对外输出函数名为fun的函数
3. as关键字
function v1() { ... }
function v2() { ... }
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
}
4. 下面这种写法是错的
var a = 1
export a // 相当与export 1，而输出的应为接口，值是不能输出的
正确写法：
export var a = 1
var a = 1
export { a }
var a = 1
export { a as n }
二、import
import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。
import { firstName, lastName, year } from './profile.js';
三、export default
1. 基本用法
export default function () {
console.log('foo');
}
export default 导出的一定是一个匿名的东西，即使接受的不是匿名函数或变量，因为从前面的例子可以看出，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。
function foo() {
console.log('foo');
}
export default foo;
上面代码中，foo函数的函数名foo，在模块外部是无效的。加载的时候，视同匿名函数加载。
2. export default的正确写法
export default 1 //正确
let a = 1
export default a //正确
export default var a = 1 // 报错！export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。
在export default时，import导出不用大括号，除非是解构赋值。
let obj = {
a: 1,
b: 2,
c: 3
}
export default obj
从其他文件导入时：
import obj from 'xxx.js'
四、其他注意点
1. commonJS和import
虽然通过babel转码，commonJS的require和import可以写在一起，可是由于import是静态解析阶段执行，所以在require引入前，import会先于它执行，这样有可能会导致错误。
2. import的简易写法
当导出下面的文件时
export let a = 1;
export let b = 2;
export let c = 3;
引入可以这样写
import {a,b,c} from xxx
或
import * from xxx
3. import 和 export 的复合写法
如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。
export { a, b } from 'xxx_module';
// 可以简单理解为
import { a, b } from 'my_module';
export { a, b };
五、import()
import()用于动态加载，它返回一个 Promise 对象。下面是一个例子。
const main = document.querySelector('main');
import(`./section-modules/${someVariable}.js`)
.then(module => {
module.loadPageInto(main);
})
.catch(err => {
main.textContent = err.message;
});
import可以用作
1. 条件加载
if(flag) {
import('./xxx')
}
2. 按需加载
btn.addEventListener('click',function(){
import('./xxx')
})
3. 动态模块路径
function fun(a) {
let moduleFun = ''
if(a=1) {moduleFun = '/blog/1'}
if(a=2) {moduleFun = '/blog/2'}
if(a=3) {moduleFun = '/blog/3'}
return moduleFun
}
import(fun(1)) // 根据函数的返回结果加载不同模块
