问题标签 [dynamic-import]

有很多这样的问题（例如this one），每个人都说解决方案只是安装babel-plugin-syntax-dynamic-import。

但是，就我而言，我已经安装了它。我之前有 webpack@3，它工作。现在我正在升级到 v4；刚刚安装了新版本的 webpack——动态导入不再起作用。

这怎么可能？以及如何再次工作？

延迟加载，具有适当的依赖解析，没有全局变量。

假设我有三个模块，main，lazy和dep。main和导入。lazy_ 可能需要也可能不需要在某个时间点加载。如何将 webpack 配置为：depmainlazy

1. 捆绑main在一起dep（好吧，这很容易）
2. 单独捆绑lazy，没有dep. 当它加载时，它会dep从main包中解析。
3. 无需在窗口或全局命名空间中写入任何内容

我可以找到如何做（2）或（3），但不能同时做。

当我使用时，SplitChunksPlugin我得到 (2) 而没有 (3) - 输出写入window.webpackJsonP全局命名空间。出于我的目的，这很糟糕，原因有两个。我必须支持没有window对象的 DOMLess 环境，而且我的项目是一个在其他人的网站/应用程序上运行的库/小部件，所以我不能让全局变量到处乱放。

当我将它配置为两个入口点时，我得到 (3) 而没有 (2) - 我的lazy文件包含dep模块代码，这似乎是多余的。

我目前正在尝试使用以下策略从相对于我的模块的路径动态加载 json 文件：

• 如果我的代码被捆绑为 Webpack 包，请使用import(filename.json)
• 在任何其他情况下，使用绝对路径回退到 AJAX 调用

以下似乎工作正常：

但是，我在 上找不到任何文档webpackJsonp，所以我认为这不是 Webpack 的公共 API 的一部分。

我还注意到这webpackJsonp是 3.12 中的一个函数和 4.28 中的一个Object（继承自Array），表明依赖webpackJsonp.

是否有（面向未来的）可靠方法测试我的代码是否使用公共 API 作为 Webpack 包运行？

基本上，我应该用什么来代替typeof webpackJsonp !== "undefined"，以达到相同的效果，但使用公共 API？

此外，我在让实际导入在 Webpack 4.28 中工作时也遇到了一些问题。请参阅Angular 7.2.3 + Webpack 4.28中的 import() 中断。

我有用 JS 编写的 ExpressJS 应用程序的 autoLoad 脚本，目前我们正在迁移到 TypeScript

如何更改和require(path.resolve(filePath));声明？require(path.resolve(filePath))(app);import

这是示例路由文件

我正在使用动态导入在 Typescript 中实现工厂模式，以便我可以在运行时初始化加载、初始化（使用必要的组合）所需的模块。

我能够按需动态加载模块https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-4.html

但是它不允许我初始化加载的模块。虽然在开发者控制台中我可以进行初始化，甚至可以通过初始化模块中的子模块和类来无缝地组合它。

努力寻找这个解决方案并尝试了很多东西，但没有得到解决。在 C# 中，我们可以使用反射并创建库和类的实例作为延迟加载，而无需直接引用它们。

我得到的错误是“//不能将'new'与类型缺少调用或构造signature.ts（2351）的表达式一起使用”当我在做

构造它并将其分配给具有该对象正在实现的接口类型的 varebale。

组件扩展的父类类型相同

请看下面的打字稿代码。

我想导入一些 npm 包，就像我们通常在 webpack 中所做的那样，但在纯 js 导入中：

但目前在纯 js 导入中，我们必须：

有人知道将一些路径映射设置为纯 javascript 的方法import吗？

在撰写本文时，我一直在尝试使用该import()功能查找有关 Webpack 代码拆分功能的更多信息，该功能仍处于 TC39 的第 3 阶段，仅受 Chrome 和 Safari 支持。这个答案表明它是用脚本标签注入填充的，但我找不到任何其他参考，而且 Webpack 的源代码让我对它的所有插件等感到困惑。在将我的代码库转换为使用之前import()，可能会遇到很多麻烦什么都没有，我想知道浏览器对 Webpack 代码拆分的支持是什么。文档只是说它取决于Promise，这对我来说是可以接受的，但是还有其他潜在的限制需要注意吗？此功能如何在幕后工作？

我正在使用这个->

"webpack": "^4.29.3", "@babel/core": "^7.2.2",

这是我的.babelrc文件->

如您所见，插件@babel/plugin-syntax-dynamic-import已安装，但如果我尝试将其用作const Panel = React.lazy(() => import('../panel/panel'));

它会抛出一个错误，表明此文件类型可能需要加载器（文件是 .jsx，但我认为这并不重要）。

我还对我的 webpack 配置做了一个要点，以防万一 -> https://gist.github.com/Taerarenai/c494e37c5cf3ba743acad2cd0e96c35f

有小费吗 ？

我做了一个vue组件包my-custom-comp，里面包含动态导入： my-custom-comp.vue

lib中的输出文件：

我my-custom-comp在我的应用程序中安装了包，并将包路径添加到 resolve.modules： webpack.config.js

但MyTaglist0.js无法解决：

如何解决从 node_modules 的动态导入？

测试回购： https ://github.com/Miaoxingren/webpack-issue-8934

在尝试移植我们的一些 JS 代码以使用模块时，我遇到了这个我无法解释的特殊情况。我正在设置我的主 JS 文件以对我的主入口点进行动态导入，然后它们又对它们需要的所有文件进行导入。设置将如下所示：

index.js

firstLevel1.js

firstLevel2.js

由于我正在导入的一些代码是遗留代码，我将 index.js 的脚本标记设置为 async="false" 以确保所有文件都以正确的顺序加载。在这个特定的示例中，我预计加载顺序是 index.js、firstLevel1.js、secondLevel1.js、secondLevel2.js、firstLevel2.js。secondLevel3.js，最后是 secondLevel4.js。但是当我查看 chrome 中的加载顺序时，这就是我所看到的。

这对我来说变得有问题，因为 JS 加载的顺序不是我想要正确设置我的旧文件的顺序。

为什么我看到的加载顺序与我预期的不同？有没有办法让它们同步加载？