js

export default和import的解构赋值

babel版本对export default和import解构赋值的影响

问题重现

  • 通常情况对某对象解构赋值：
1
2
3
4
5
6
7
const person = {
  name: 'clinz',
  age: 80
}

// 获取name属性：
const { name } = person
  • 拆分成模块：
1
2
3
4
5
// person.js
export default person = {
  name: 'clinz',
  age: 80
}
1
2
3
4
5
// 在app.js中获取person.js
import person from './person'
const { name } = person
console.log(name) // clinz
console.log(person.name) // clinz
  • 以上代码是没有问题的，下面在import中解构赋值：
1
2
3
// 在app.js中获取person.js
import { name } from './person'
console.log(name) // undefined

原因分析

1
import { name } from './person'

这句代码语法上是没问题的，之前用antd-init创建的项目，在项目中使用下面的代码是没问题的。但是之后用vue-cli和create-react-app创建的项目中使用下面的代码都不能正确获取到name。
搜索资料后发现是babel的版本对export default处理时造成的问题：

  • ES6中的变量解构：
1
2
const a = { b: 1 }
const { b } = a

这里可以直接用解构赋值来获得对象的同名属性，等效于：

1
const b = a.b
  • ES6的模块导入也提供了相似的语法：
1
import { resolve } from 'path'

如果使用webpack构建项目的话，注意这里的解构与普通变量的解构是有所区别的，比如在a.js里有以下代码：

1
2
3
export default {
  b: 1
}

如果按照普通变量的解构法则来导入这个包，即这种形式：

1
import { b } from './a'

是会发生错误的，并不能导出变量b。主要因为这和webpack的构建有关。使用模块导入时，当用webpack构建后，以上的

1
import { b } from './a'

变为了类似

1
a.default.b

可以看到变量b在a.default上，并不在a上，所以解构出来是undefined。如果要正确解构，则必须在模块内导出，即：

1
export const b = 1

这样的话，构建后的代码中，变量b即在a上，而不是在a.default上，从而能正确解构。

所以

1
2
3
4
export default {
 name: 'clinz',
 age: 80
}

变成了

1
2
3
4
module.exports.default = {
 name: 'clinz',
 age: 80
}

所以取不到name的值是正常的。那为什么antd-init建立的项目可以获取到呢？

解决方案

根据资料的描述：import语句中的“解构赋值”并不是解构赋值，而是named imports，语法上和解构赋值很像，但还是有所差别，比如下面的例子。

1
import { name as fullname } from './person' // 解构赋值中不能用 as
1
2
3
4
5
6
7
8
let obj = {
 a: {
 b: 'hello',
 }
}

let {a: {b}} = obj // import 语句中不能这样子写
console.log(b) // => hello

这种写法本来是不正确的，但babel 6之前可以允许这样子的写法，babel 6之后就不能了。

1
2
3
4
5
6
7
// a.js
import { name, age } from "./b"
// b.js
export default {
 name: 'clinz',
 age: 80
}

所以还是在import 语句中多加一行

1
2
import b from './b'
let { name, age } = b

或者

1
2
// a.js
import { name, age } from "./b"
1
2
3
4
// b.js
let name = 'clinz'
let age = 80
export { name, age }

或者

1
2
3
4
5
// a.js
import { name, age } from "./b"
// b.js
export let name = 'clinz'
export let age = 80

而antd-init使用了babel-plugin-add-module-exports，所以 export default也没问题。