问题

es6语法中的解构赋值，在对于==import==引入的对象进行解构赋值时发现对象变成了undefined。

错误示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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转义后会丢失作用域，代码如下

1
2
3
4
export default {
  host: 'localhost',
  port: 80
}

babel转译后

1
2
3
4
module.exports.default = {
  host: 'localhost',
  port: 80
}

解决方案

1
2
3
4
5
6
7
// main.js
import { foo, bar } from "./static"

// static.js
let foo =  "foo"
let bar = "bar"
export { foo, bar }