如何解構ES6模塊聯合導出

Question

我在出口情況下遇到了一點打嗝，我不知道為什么。 我可能需要一個Babel插件來解決它但不確定哪個。

// a.js
export function fromA() {}

// b.js
export function fromB() {}

// index.js
import * as a from './a'
import * as b from './b'

export default { ...a, ...b}

// test.js
import all from './index'  
const { fromA } = all // Works

import { fromA } from './index'  // Does not work. Why?

我正在通過巴別塔。 這是我的rc：

{
  "plugins":  [
    "transform-object-rest-spread", 
    "transform-class-properties", 
    "transform-export-extensions", 
    "transform-decorators-legacy"
   ], 
  "presets":  ["latest", "react"]
}

似乎我應該像往常一樣在import語句中的test.js中進行解決，但是沒有。 如果，在index.js中，我導出單個函數，那么它就會出錯。 如：

import { fromA } from './a'
import { fromB } from './b'
export default { fromA, fromB }

但是我想避免這種情況。

Answer 1

雖然導入語法看起來像解構，但事實並非如此。

導出命名變量時，只能將其作為命名變量導入。 當您導出默認變量時，您只能將其作為默認變量導入。

例如：

// a.js
export const foo = 1
export const bar = 2
export default { bar: 42, baz: 33 }

import { foo } from './a'
// foo = 1

import { bar } from './a'
// bar = 2

import a from './a'
// a = { bar: 42, baz: 33 }

唯一的例外是當您導入非es6模塊時。 由於commonjs模塊每個模塊只能導出一個變量，因此babel會回歸解構導入它們。

因此，由於您要從index.js導出單個對象，因此您只能將其作為整個對象導入。

---

您正在尋找的是export * from聲明：

export * from './a'
export * from './b'

它將從兩個模塊重新導出所有命名導出。