循环中的ES6导入

时间:2017-09-16 11:05:58

标签: javascript loops import ecmascript-6

有没有办法在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
}

3 个答案:

答案 0 :(得分:6)

ES模块的主要功能之一是可以静态分析。出于这个原因,import语句跟在strict syntax之后 - export也是如此。一个代码片段“无循环”是必须要做的事情。

这允许在IDE和工具中精确计算模块导入和导出。例如,这对于树木摇晃很有用。

答案 1 :(得分:4)

我认为更好更清晰的方法是创建一个索引文件,然后在一个导入中导入多个组件。

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

export {
  PopUp,
  ToggleSwitch
};

//app.js

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

答案 2 :(得分:4)

对于多个导入文件,我找到了这个解决方案:

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