Question

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

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

let routes: any = [];

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

如何使用import模块中的typescript（esnext）？（此代码在打字稿文件中）是否像import('./**/*.ts')？

Answer 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返回Promise版本的webpack，因此您的代码应为：

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

并且您应该在文件中包含所有惰性束，并且路由是路由的数组。：）

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

1 个答案: