我在导出场景中遇到了一点小问题,我不确定为什么。我可能需要一个 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?
我正在运行 Babel。这是我的 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 }
不过我想避免这种情况。
最佳答案
虽然 import 语法看起来像解构,但它不是。
导出命名变量时,只能将其作为命名变量导入。当您导出默认变量时,您只能将其作为默认变量导入。
例如:
// 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 }
唯一的异常(exception)是当您导入非 es6 模块时。由于 commonjs 模块每个模块只能导出一个变量,babel 回退到解构导入它们。
因此,由于您要从 index.js
导出单个对象,因此您只能将其作为整个对象导入。
您可能正在寻找的是 export * from
语句:
export * from './a'
export * from './b'
它将重新导出来自两个模块的所有命名导出。
关于javascript - 如何解构一个ES6模块联合导出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40569837/