import对象解构失败问题

问题

用惯了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 }

END