ES6的模塊導入與變量解構的注意事項

轉自：https://www.cnblogs.com/pixcai/p/5597109.html

在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上，從而能正確解構