使用Typescript在Webpack編譯期間動態導入模塊

Question

我正在嘗試為愛好項目創建一個框架，在該框架中我自己的Typescript文件中都有任意數量的對象定義。 然后，我有了一個工廠，該工廠可在需要時根據這些定義創建實體。

例如，通過調用createEntity('Player') ，工廠將使用名為Player定義來創建新實體。

由於項目中可能有大量這些定義文件，因此我不想手動將它們全部導入到factory模塊中。 由於我使用的是Webpack，因此我認為應該可以找到與.entity.ts類的glob匹配的所有文件，並將它們在編譯期間導入到工廠模塊中 。 但是，我不確定如何執行此操作。

我發現有關上下文api的一些提及似乎可以滿足我的需要，但是從示例中我看不出如何在工廠模塊中實際使用它。 TSC還抱怨說，它無法找到該名稱require ，當我把我的模塊中的以下幾行：

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

那么，如何在不手動編寫導入文件的情況下，將所有定義文件包含到Webpack捆綁包中並將其導入到工廠模塊中呢？

Answer 1

找到了解決方案。 首先，我必須將軟件包@types/webpack-env和@types/node為dev依賴項。

然后，我的工廠模塊中的以下代碼選擇並導入了我的定義：

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

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