问题
用惯了es6语法中的解构赋值,在对于import引入的对象进行解构赋值时发现对象变成了undefined
。
错误示例
// static.js
let foo = "foo"
let bar = "bar"
let obj = {foo, bar}
export default obj
// main.js
import { foo, bar } from "./static"
console.log(foo) // undefined
console.log(bar) // undefined
import obj from "./static"
console.log(obj.foo) // foo
console.log(obj.bar) // bar
原因
export default语法在bebel转义后会丢失作用域,代码如下
export default {
host: 'localhost',
port: 80
}
babel转译后
module.exports.default = {
host: 'localhost',
port: 80
}
解决方案
// main.js
import { foo, bar } from "./static"
// static.js
let foo = "foo"
let bar = "bar"
export { foo, bar }