web-dev-qa-db-ja.com

ES2015構文でファイルからエクスポートされたすべてをインポートする方法は？ワイルドカードはありますか？

ES2015構文では、新しいインポート構文があります。オブジェクトにラップせずに、あるファイルから別のファイルにエクスポートされたすべてをインポートする方法を見つけようとしています。同じファイルで定義されているかのように利用できます。

それで、本質的に、これ：

// constants.js

const MYAPP_BAR = 'bar'
const MYAPP_FOO = 'foo'

// reducers.js

import * from './constants'

console.log(MYAPP_FOO)

少なくとも私のBabel/Webpackセットアップによれば、これは機能しません。この構文は無効です。

代替案

これは機能します（ただし、インポートするものが2つ以上必要な場合は長くて面倒です）。

// reducers.js

import { MYAPP_BAR, MYAPP_FOO } from './constants'

console.log(MYAPP_FOO)

これと同様に（ただし、constをオブジェクトにラップします）：

// reducers.js

import * as consts from './constants'

console.log(consts.MYAPP_FOO)

最初のバリアントの構文はありますか、それとも名前ごとに各物をインポートするか、ラッパーオブジェクトを使用する必要がありますか？

javascriptecmascript-6es6-module-loader
25
mikl

最初のバリアントの構文はありますか、

いや.

または、それぞれを名前でインポートするか、ラッパーオブジェクトを使用する必要がありますか？

はい。

23
Felix Kling

最初のバリアントのワイルドカードですべての変数をインポートすることはできません。異なるファイルに同じ名前の変数があると変数が衝突するためです。

//a.js
export const MY_VAR = 1;

//b.js
export const MY_VAR = 2;


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

console.log(MY_VAR); // which value should be there?

ここではMY_VARの実際の値を解決できないため、この種のインポートは不可能です。

あなたの場合、インポートする値がたくさんある場合、それらをすべてオブジェクトとしてエクスポートする方が良いでしょう：

// reducers.js

import * as constants from './constants'

console.log(constants.MYAPP_FOO)
31
just-boris

オブジェクトをインポートし、そのプロパティを反復処理してから、このようなevalを使用して定数を手動で生成できます

import constants from './constants.js'

for (const c in constants) {
  eval(`const ${c} = ${constants[c]}`)
}

残念ながら、このソリューションはmy IDE=のインテリセンスでは動作しません。定数が実行中に動的に生成されるためです。しかし、一般に動作するはずです。

1
user1966866

確かにあります。

Codegen.macroを使用するだけです

codegen
      'const { ' + Object.keys(require('./path/to/file')).join(',') + '} = require("./path/to/file");

しかし、codegenによって生成された変数をインポートできないようです。 https://github.com/kentcdodds/babel-plugin-codegen/issues/1

0
林东吴