Javascript 动态引用静态ESNext导入

假设我有这些进口商品：

import clearLineReporter from '../modules/clear-line-reporter';
import karmaReporter from '../modules/karma-reporter';
import metaTestReporter from '../modules/meta-test-reporter';
import stdReporter from '../modules/std-reporter';
import tapJSONReporter from '../modules/tap-json-reporter';
import tapReporter from '../modules/tap-reporter';
import webSocketReporter from '../modules/websocket-reporter';

这些必须像我上面所做的那样被引用，换句话说，我显然不能这样做：

const imports = {
     stdReporter: import(...),
     tapJSONReporter: import(...),
     ...
     webSocketReporter: import(...)
}

有没有办法通过某种形式的反射来引用导入的文件？因为我似乎无法将它们组合在一起，以某种方式引用它们

我可以使用

require（）

，而不是import语法，但我想知道是否有某种方法可以使用import语句执行一些动态操作，例如动态引用它们，这样，如果添加或删除导入，就不必更改任何其他代码

有没有办法通过某种形式的反射来引用导入的文件

答案取决于环境，这在任务中意味着，因为

import

语句可以是浏览器中的本地模块实现，或者

babel

-ed要求在

node.js

中使用语句，或者在

webpack

中使用编译时解析的绑定

因此，在每种情况下，都有解决方案来进行反射。在node.js和

babel

-ed中，code

import

只是

require

包装器，因此任何信息都可以在那里找到

在带有本机ES模块的浏览器中，可以通过

ServiceWorker

提供对这些模块的所有请求，因此它可以提供有关获取的ES模块的必要信息。在浏览器中，ES模块也可以通过以下方式动态导入：

---

最有趣的部分是

webpack

：编译时解析和半反射可以通过函数式的

externals

resolver（）实现，运行时通过加载模块API（）实现。

我通过问一个不同的问题找到了一个很好的答案，如下所示：

例如，创建一个文件名

grouped modules.ts

，您只需列出模块并导出每个模块

export {default as clearLineReporter} from '../modules/clear-line-reporter';
export {default as karmaReporter} from '../modules/karma-reporter';
export {default as metaTestReporter} from '../modules/meta-test-reporter';
...
export {default as stdReporter} from '../modules/std-reporter';
export {default as tapJSONReporter} from '../modules/tap-json-reporter';

然后在您的模块中，您只需执行以下操作：

import * as mods from './grouped-modules'

export {mods}

它将导出名为

s

的命名空间中的类型和值。然后，您可以使用以下方法导入它们：

import {mods} from 'your-module'

const anObject: mods.clearLineReporter = ...;

---

这允许您将模块动态分组为一个变量。

考虑创建一个类似或的

index.js

文件，然后使用

import*作为从“../modules”导入的内容。