# 【JavaScript进阶】export、export default和import
问题起源：同事给项目加新的模块的时候，React报了这个错👇，然后模块没有加载成功。。
...Lazy element type must resolve to a class or function...
最后搞了半天发现是export的问题，模块导出写错了不符合规范，导致React的懒加载失败了。我发现我还是太菜鸡了😐
本文研究一下export的问题，还有与之对应的import。
# 一、ES6最重要特性
export还有import是ES6最重要的特性之二。
export的作用是将一个JavaScript模块中的值、方法、对象等导入到另一个模块中，另一个模块通过import语句来使用。
在导入的模块中只能读取，不能修改。想要修改的话只能去到导出的模块中修改，并且修改的值会实时更新。
# 二、使用方法
# 语法
有两种exports导出方式：
- 命名导出（每个模块包含任意数量）
- 默认导出（每个模块包含一个）
# 用法
export
// export
const datas = [];
function print (str) {
console.log(str);
}
export { datas, print };
// 直接导出 上下等效
export const datas = [];
export function print (str) {
console.log(str)
}
// import
import { datas, print } from "export"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default
顾名思义，默认导出只能导出一个，并且可以在导入模块中为其定义任何符合规范的名称。
并且一个模块中只能有一个export default。
// export-default
function print (str) {
console.log(str);
}
export default print;
// import
import print from "export-default"
import print1 from "export-default"
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 三、区别
1.
export可以在一个模块中使用多次，而export default只能使用一次。2.使用
export和export default时，import要与之对应：export { datas, func1 }=>import { datas, func1 } from "xxx"export default func1=>import func2 from "xxx"
3.
export导出的变量、方法等在导入模块中的变量名必须与导出模块相同；export default导出的变量、方法等在导入模块中可以使用任何符合命名规范的变量名。