问题标签 [dynamic-import]

问题：

如何获取文件路径列表Array<string>：

ref.SomeStaticMethod()对于每条路径，在节点中调用它们的静态方法？

注意：我正在为节点（如果重要的话）和 windows 10 使用打字稿。

完整的错误堆栈跟踪：

我想添加类型：

importComponent: any <= not to be any

一切正常，但any会导致错误：

我正在尝试在运行 Ava 时使用额外的 babel 插件来转换反应动态导入，以便它们可以在节点上运行（基于此响应）

ava 动态语法导入启用支持

我无法将它添加到我的主 .babelrc 文件中，因为我们正在 webpack 中实现捆绑拆分。

为了解决这个问题，我试图通过 ava 的 babel 配置包含插件。当我运行 ava 时，babel 不使用附加插件。

包.json

.babelrc

我正在使用动态导入来创建项目中所有语言环境的块。块已创建，但客户端在运行时报告此错误：

有问题的代码：

巴贝尔配置：

语言环境是这样导出的：

将导入路径更改为静态的东西，比如./locales/en-GB/translations.js，有效。

编辑

locale当我重新分配给中间变量时，这开始起作用，如下所示：

我还注意到，locale在调试器中检查变量时，在 IIFE之外它解析为实际字符串（“en-GB”），但在它内部解析locale为包含变量的模块。非常令人困惑，而且这个解决方案感觉太老套了，无法接受。

我用 Angular cli 创建了一个示例 Angular 6 库

1. ng 新的测试库
2. ng g 库 my-lib

这为我提供了角度库“my-lib”和示例应用程序“test-lib”的基本结构，我认为它们可用于测试目的。

在库中，我想使用动态导入。我有一个应该延迟导入的类：

我有我的消费者组件：

这或多或少是关于它的。我使用“ng build my-lib”将库编译到 dist 文件夹。在 tsconfig 中，我将“模块”更改为 esnext，以支持动态导入。

现在我想在示例应用程序中使用由 cli 生成的库。所以在 app.module.ts 中，我导入了库的模块，在 app.component.ts 的模板中，我添加了相应的选择器。

当我现在使用“ng build”构建示例应用程序或从“ng serve”开始时，我可以看到没有生成“惰性块”。它只是普通的 main、polyfills、runtime、styles 和 vendor。我错过了什么？不能在库中使用动态加载吗？

当我从已编译的 dist 文件夹中更改 app.module.ts 内的导入路径时

到图书馆源代码

创建了惰性块，并且一切都按预期工作。但这当然不是我想要的。我想在一个完全不同的项目中使用编译的库，我无法从打字稿源导入。

编辑：我的问题的摘要
库本身可以执行动态加载还是此功能仅适用于主应用程序以延迟加载应用程序的其他部分或其他库？！

编辑：问题的原因
我的库包含数百个生成的打字稿类。每个用例只需要几个。这些应该按需加载。

谢谢你的帮助！
斯蒂芬

我正在开发一个具有多个单独页面的基于 CMS 的网站，并且我正在使用通常的代码拆分策略app.js在文件之后加载的文件将站点范围的功能加载到每个页面上。是主入口文件，它使用动态导入来加载特定于页面的脚本。这是我的一个例子：vendor.jsapp.jsapp.js

在这种情况下，'pages/register-for-a-class/main.js' 文件页面使用Vue作为依赖项，但它是该站点迄今为止唯一需要它的页面。vendor.js当仅在此页面上使用Vue 时，我宁愿不将其捆绑到其中。我试图通过尝试以下方法将 Vue 本身包含为动态导入：

但这给了我一个 webpack 捆绑错误，上面写着Module parse failed: 'import' and 'export' may only appear at the top level. 所以我也试过这个：

这完全没有改变任何东西。没有创建“vue.bundle.js”文件，加载页面自然会产生Vue is not defined错误。

所以这就是我真正要问的。如果我可以自动pages/register-for-a-class/main.js调用正常的静态导入（例如import Vue from 'vue'）并让 webpack 生成register-for-a-class.bundle.js文件和相应的register-for-a-class-vendor.bundle.js并自动动态导入该供应商包，那将是非常棒的。这可能吗？

这是我当前的 webpack.common.js 文件（我正在使用webpack-merge）：

我正在尝试从这样的模块中动态导入 React 组件：

然后尝试在渲染中像这样使用它：

但 Typescript 编译失败，出现“TS2604：JSX 元素类型“OsdComponent”没有任何构造或调用签名。”

该代码在另一个未使用 Typescript 编译的模块中工作。

我正在使用带有react-router(4.3.1) 的最新版本 (16.6) 的 React，并尝试使用React.Suspense.

尽管我的路由工作正常，并且代码确实分成了几个动态加载的包，但我收到了关于不返回函数而是返回对象的警告Route。我的代码：

控制台警告如下： Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.

正常导入会返回一个函数，但动态导入lazy()会返回一个对象。

对此有任何修复吗？

假设我有一个来自 CDN 的脚本，内容如下：

我希望将它包含在我的应用程序中时，我可以使用它来加载我的应用程序模块而无需绝对 URL？因为如果我不这样做，它会解析为脚本的来源：

我的问题是：这是错误还是规范行为？如果可以对此行为进行进一步解释，那就太好了。我正在使用勇敢的浏览器。

我正在尝试以异步导入 lodash 为例，但它被包含在主块中

Version: webpack 4.23.1

我做了一个简单的代码来重现这个问题

完整的回购链接如下
https://github.com/unlocomqx/webpack4-async-chunk