动态引用静态 ESNext 导入答案

【问题标题】：Dynamically reference static ESNext imports动态引用静态 ESNext 导入
【发布时间】：2018-04-20 12:07:07
【问题描述】：

假设我有这些进口：

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

【问题讨论】：

考虑创建一个index.js 文件，如this 或that，然后使用import * as imports from '../modules';。

标签： javascript node.js ecmascript-next

【解决方案1】：

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

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 = ...;

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

【讨论】：

【解决方案2】：

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

Answer 取决于环境，意味着在查询中，因为 import 语句可以是浏览器中的 ES 原生模块实现，或者 babel-ed 要求 node.js 中的语句，或 @987654327 中的编译时解析绑定@。

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

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

最有趣的部分是webpack：编译时解析和半反射可以通过externals函数式解析器（https://webpack.js.org/configuration/externals/#function）实现，运行时通过加载模块API（https://webpack.js.org/api/module-variables/#webpack_modules-webpack-specific-）实现

【讨论】：