使用 Typescript 在 Webpack 编译期间动态导入模块答案

【问题标题】：Import modules dynamically during Webpack compilation with Typescript使用 Typescript 在 Webpack 编译期间动态导入模块
【发布时间】：2019-09-04 18:58:59
【问题描述】：

我正在尝试为业余项目创建一个框架，其中我在其自己的 Typescript 文件中有任意数量的对象定义。然后我有一个工厂，它在请求时根据这些定义创建实体。

例如，通过调用createEntity('Player')，工厂将使用名为Player 的定义来创建一个新实体。

由于项目中可能有大量这些定义文件，我不想手动将它们全部导入工厂模块。由于我使用的是 Webpack，我认为应该有可能找到与 .entity.ts 这样的 glob 匹配的所有文件，并将它们导入到工厂模块在编译期间。但是，我不确定如何执行此操作。

我发现一些关于context api 的提及似乎可以满足我的需要，但是从我看到的示例中我无法弄清楚如何在我的工厂模块中实际使用它。 TSC 还抱怨说，当我在模块中添加以下行时，它找不到名称 require：

function importAll(r) {
  r.keys().forEach(r);
}
importAll(require.context('.', true, /\.entity\.ts/));

那么，如何在不手动编写导入的情况下将所有定义文件包含到 Webpack 包中并将它们导入我的工厂模块？

【问题讨论】：

标签： javascript typescript webpack

【解决方案1】：

找到了解决办法。首先，我必须安装包 @types/webpack-env 和 @types/node 作为开发依赖项。

然后我的工厂模块中的以下代码选择并导入我的定义：

function importAll(r) {
  return r.keys().map(r);
}

const knownEntities = importAll(require.context('../..', true, /\.entity\.ts$/));

【讨论】：