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

        在ES6中變量解構是這樣的：

const a = { b: 1 }
const { b } = a

我們可以直接用解構賦值來獲得對象的同名屬性，等效於：

const b = a.b

除了變量的解構賦值，ES6的模塊導入也提供了相似的語法：

import { resolve } from 'path'

如果使用webpack構建項目的話，注意這里的解構與普通變量的解構是有所區別的，比如在a.js里有以下代碼：

export default {
    b: 1
}

如果按照普通變量的解構法則來導入這個包，即這種形式：

import { b } from './a'

是會發生錯誤的，並不能導出變量b。主要因為這和webpack的構建有關。使用模塊導入時，當用webpack構建后，以上的

import { b } from './a'

變為了類似

a.default.b

可以看到變量b在a.default上，並不在a上，所以解構出來是undefined。如果要正確解構，則必須在模塊內導出，即：

export const b = 1

這樣的話，構建后的代碼中，變量b即在a上，而不是在a.default上，從而能正確解構。

---