5

エクスポート シナリオでちょっとした問題が発生しましたが、その理由がわかりません。これに対処するには 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 }

ただし、それは避けたいと思います。

4

1 に答える 1

12

インポート構文は分解のように見えますが、そうではありません。

名前付き変数をエクスポートする場合、名前付き変数としてのみインポートできます。また、デフォルト変数をエクスポートする場合は、デフォルト変数としてのみインポートできます。

例えば：

// 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 モジュールはモジュールごとに 1 つの変数しかエクスポートできないため、babel はそれらをインポートする分解にフォールバックします。

から単一のオブジェクトをエクスポートしているindex.jsため、オブジェクト全体としてのみインポートできます。

おそらくあなたが探しているのはexport * fromステートメントです：

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

両方のモジュールからすべての名前付きエクスポートを再エクスポートします。

于 2016-11-13T02:38:19.670 に答える