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

Answer 1

有什么方法可以通过某种形式的反射来引用导入的文件？

答案取决于环境，意味着在任务中，因为import语句可以是浏览器中的ES本机模块实现，或者babel - 需要node.js中的语句，或者编译 - 时间已解决webpack中的绑定。

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

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

最有趣的部分是webpack：编译时解析和半反射可以通过功能样式（https://webpack.js.org/configuration/externals/#function）中的externals解析器实现，并通过加载模块API实现运行时（{ {3}}）

Answer 2

通过提出一个不同的问题，我发现这个问题有一个很好的答案：

exporting imports as a namespace with TypeScript

例如，创建一个文件名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导入

2 个答案: