ES6提供的import、export方法， 使组件化开发模式迈向新高度。本文来介绍import、export的语法及使用方法。
根据 export 的导出方式，可以概括为命名导出、默认导出两种方式。
命名导出常用语法：
export { name1, name2, ..., nameN };
export { variable as name1, variable as name2, ..., nameN };
export const name1 = ..., name2 = ..., nameN; // also var, let
export * from ...;
export { name1, name2, ..., nameN } from ...;
export { import1 as name1, import2 as name2, ..., nameN } from ...;
默认导出：
export default expression;
export default function() { ... }; // also class, function*
export default function name1() { ... }; // also class, function*
export { name1 as default, ... };
对应 export 的多种导出方式，import 也有多种倒入方式，使调用方式更加灵活多变。
import 使用语法如下：
import defaultExport from 'module-name';
import * as name from 'module-name';
import { exportName1, exportName2, ... } from 'module-name';
import { exportName1, exportName2 as alias, ... } from 'module-name';
import defaultExport, * as name from 'module-name';
import 'module-name';
接下来，我们将根据使用常见使用场景来举例说明使用方法。
导出已声明的变量或函数：
util.js
const aaa = 'aaa';
function cube(x) {
return x * x * x;
}
// 导出已声明的变量时，只能用这种方式，否则会报错
export { aaa, cube };
上述导出的引用方式如下：
index.js
import { aaa, cube } from './util';
console.log(aaa, cube); // 'aaa' 8
考虑到导出变量名 aaa 的语义化辨识度低，可考虑如下引入方式：
import { aaa as baseStr, cube } from './util';
console.log(baseStr, cube(2)); // 'aaa', 8
此时，若在index.js文件中调用变量aaa，会提示" aaa is not defined " 。
变量命名费时费心还怕冲突吗？直接导入整个模块也不错：
import * as util from './util';
console.log(util.aaa, util.cube(2)); // 'aaa' 8
若只需引入 cube 方法，引用方式如下：
import { cube } from './util';
console.log(cube(2)); // 8
也可以直接导出声明的变量或函数，如下：
export const aaa = 'aaa';
export function cube(x) {
return x * x * x;
}
使用方式与先声明再导入的使用方式一致，不在赘述。
export 方式决定了 import 方式。上述的多种引入方式中，引入的变量名都是固定的，即引入的变量名必须与导出的变量名保持一致。而 export 的默认导出却能打破这个限制。
可以被设置为默认导出的，有以下几种情况：
默认导出函数：
util.js
export default function cube(x) {
return x * x * x;
}
index.js
import math from './util';
console.log( math(2)); // 8
默认导出类：
util.js
export default class {
constructor (name, age) {
this.name = name;
this.age = age;
}
}
index.js
import Person from './util';
const obj = new Person('xiaoming', 24);
console.log( obj ) ; // { name: 'xiaoming', age: 24 }
默认导出表达式：
util.js
export default 1 + 2;
index.js
import result from './util';
console.log( result ) ; // 3
注：不能使用var、let、const语句直接作为默认导出，可以声明变量后再作为导出
错误示例：
export default const aaa = 'aaa';
正确示例：
const aaa = 'aaa';
export default aaa;
默认导出的其他尝试：
1，每个组件只能有一个默认导出语句，否则会报错 "Duplicate export 'default'"
2，一个组件包含默认导出与命名导出，如下：
util.js
const aaa = 'aaa';
export { aaa };
export default 1 + 2;
index.js
import result, { aaa } from './util’; // 默认导出命名在前，否则会报错
console.log( result, aaa ) ; // 3 'aaa'
兼容性
截止目前，有些浏览器并不支持 import 与 export 方法，在实际项目中多使用转换器做转换来实现，常用转换器有：Babel、Webpack、Rollup等。