web-dev-qa-db-ja.com

for-of-loopでのES6のインポート

ES6でfor-of-loop（または別のループ）を使用して複数のファイルをインポートおよびエクスポートする方法はありますか？

const moduleNames = ['NumberUtils', 'StringUtils', 'ArrayUtils', 'MyModule', 'AnotherModule', 'BaseModule']

let modules = {}

for (const moduleName of moduleNames) {
    import module from './' + moduleName
    modules.moduleName = module
}

export modules

ループなしで私は書く必要があります：

import NumberUtils from './NumberUtils'
import StringUtils from './StringUtils'
import ArrayUtils from './ArrayUtils'
import MyModule from './MyModule'
import AnotherModule from './AnotherModule'
import BaseModule from './BaseModule'

export {
    NumberUtils,
    StringUtils
    ArrayUtils
    MyModule
    AnotherModule
    BaseModule
}
javascriptloopsimportecmascript-6
10
Vesmy

複数のインポートファイルの場合、この解決策を見つけました。

const files = require.context('../myFolder', true, /(Module|Utils)\.js$/)
3
Vesmy

ESモジュールの主な機能の1つは、静的に分析できることです。このため、importステートメントは 厳密な構文 に従います-exportも同様です。スニペット「ループなし」は、実行する必要がある方法です。

これにより、IDEとツールでモジュールのインポートとエクスポートを正確に把握できます。これは、たとえばツリーの揺れに役立ちます。

8
Estus Flask

それを行うには、インデックスファイルを作成してから、1つのインポートで複数のコンポーネントをインポートする方が、より明確で明確な方法だと思います。

//index.js
import PopUp from './PopUp';
import ToggleSwitch from './ToggleSwitch';

export {
  PopUp,
  ToggleSwitch
};

//app.js

import { PopUp, ToggleSwitch } from './components';
5
Piotr O