如何在子目录中使用 webpack 导入加载？

【问题标题】：how to load using webpack import in sub-directories?如何在子目录中使用 webpack 导入加载？
【发布时间】：2019-03-18 10:02:28
【问题描述】：

我正在使用webpack 来执行dynamic import 来加载子目录中的文件：

const requireApplicationRoutes = require.context('./', true, /routes.js$/);

let routes: any = [];

requireApplicationRoutes.keys().forEach((fileName) => {
  routes = routes.concat(requireApplicationRoutes(fileName).default);
});

如何在esnext 模块中使用typescript 做到这一点（import）？（打字稿文件中的这段代码）比如import('./**/*.ts')?

【问题讨论】：

我不认为你可以用 ES 动态导入来做到这一点：它只允许你导入特定的模块名称，而不是列出模块的目录。但是，如果您使用 webpack 处理模块，您可能仍然可以在 esnext 模块中使用 require.context。
好吧，问题是代码拆分不起作用..

标签： javascript typescript webpack ecmascript-6

【解决方案1】：

在webpack、typescript和esnext中，您可以使用require.context加载子目录中的文件，只需使用lazy option from webpack即可。

您的typescript 代码应如下所示：

const requireApplicationRoutes = (require.context as any)('./', true, /routes.ts$/, 'lazy');

requireApplicationRoutes.keys().forEach((fileName: any) => {
  routes = routes.concat(requireApplicationRoutes(fileName).default);
});

但是，require.context在webpack版本中返回Promise，所以你的代码应该是：

const routes = Promise.all(
  requireApplicationRoutes.keys().map((fileName: string) => requireApplicationRoutes(fileName).then((route: any) => route.default)),
).then(([ modules ]) => modules);

您的文件中应该包含所有惰性捆绑包，并且路由是您的路由数组。 :)

【讨论】：

有效！谢谢！！