ES模块导入和导出

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/mynewdays/article/details/102750476

上篇文章介绍了 ES6 规范可能成为将来的JS模块的实际规范，这篇具体介绍一下 ES6 模块中如何导出和导入数据

export：模块中导出数据

import：从其他模块导入数据

单数据导出

创建 a.js，键入如下代码，有选择的导出部分数据

export let name='蔡徐坤'
export let age=20

在 b.js 中导入需要的变量

 //这里路径必须为 ./a，而不能是 a，否则会报找不到 a.js
import {name} from './a'
console.log(name)

注意：导出和导入的变量名称必须相同

多数据导出

也可以使用一个 export 已对象的形式同时导出多个数据

a.js 代码

let name='蔡徐坤'
let age=20
export let star={
    name,
    age
}

b.js 代码

 //这里路径必须为 ./a，而不能是 a，否则会报找不到 a.js
import {star} from './a'
console.log(star)

默认导出

前面到处的缺憾：导出的变量名称叫什么，导入时的名称也必须叫什么

如果希望导入模块时能够自定义变量名称，可以使用 export default

a.js 代码

let name='蔡徐坤'
let age=20
export default {
    name,
    age
}

b.js

 //这里路径必须为 ./a，而不能是 a，否则会报找不到 a.js
import star from './a'
console.log(star)

注意：上面每次代码修改后，都需要使用 webpack 重新打包