循环中的 ES6 导入答案

【问题标题】：ES6 import in for-of-loop循环中的 ES6 导入
【发布时间】：2018-02-25 10:47:21
【问题描述】：

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

【问题讨论】：

您可以使用export {default as NumberUtils} from "./NumberUtils"; FYI，这使得这些类型的列表更易于维护。为什么添加一行代码比向数组中添加一项更难？

标签： javascript loops import ecmascript-6

【解决方案1】：

ES 模块的主要特点之一是它们可以进行静态分析。出于这个原因，import 声明遵循strict syntax - export 也是如此。 sn-p 'without loop' 是它必须完成的方式。

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

【讨论】：

【解决方案2】：

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

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

export {
  PopUp,
  ToggleSwitch
};

//app.js

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

只对Webpack有效。通常不适用于 ES6。
另外，它也不适用于静态提取。根据他们的警告：Critical dependency: require function is used in a way in which dependencies cannot be statically extracted