动态引用静态 ESNext 导入

Question

假设我有这些导入：

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() 而不是导入语法，但我想知道是否有某种方法可以用导入语句做一些动态的事情，例如动态引用它们，这样如果我添加或删除导入，我不必更改任何其他代码。

Answer 1

Is there any way I can reference imported files through some form of reflection?

答案取决于环境，意味着在查询中，因为 import 语句可以是浏览器中的 ES 原生模块实现，或者 babel-ed 到 node.js 中的 require 语句，或者webpack.

中的编译时解析绑定

所以，在每种情况下都有做一些反思的解决方案。在 node.js 中使用 babel-ed 代码 import 只是 require 包装器，因此任何信息都可以在那里获得。

在具有原生 ES 模块的浏览器中，所有对它们的请求都可以通过 ServiceWorker 提供服务，因此它可以提供有关获取的 ES 模块的必要信息。同样在浏览器中，ES 模块可以通过这种方式动态导入：https://matthewphillips.info/posts/loading-app-with-script-module

最有趣的部分是webpack：externals函数式解析器可以实现编译时解析和半反射（https://webpack.js.org/configuration/externals/#function), and runtime by load module API (https://webpack.js.org/api/module-variables/#webpack_modules-webpack-specific-）

Answer 2

我通过在此处提出不同的问题发现了这个问题的一个很好的答案：

例如，创建一个文件名 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 = ...;

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

动态引用静态 ESNext 导入

Dynamically reference static ESNext imports

javascript

node.js

ecmascript-next