版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
上篇文章介绍了 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 重新打包