如何解构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'

它将从两个模块重新导出所有命名导出.