问题标签 [dynamic-import]

我在 webpack / react 应用程序中使用动态导入时遇到问题。这是我的代码：

由于某种原因，模块似乎被正确导入，因为它满足导入功能条件 - 即

但是，该组件仍未定义。返回值为：

奇怪的是，如果我在文件顶部添加相同组件的静态导入，那么导入会按预期工作 - 显然这不是我想要的：D

任何帮助将不胜感激。

提前致谢！

我正在尝试测试以下功能：

使用以下代码：

我已经安装了babel-plugin-dynamic-import-node，因为动态导入在 Node 中不起作用，必须用 require 替换。

这是es.json我尝试加载的内容：

我的.babelrc配置如下：

这是我的文件夹结构：

当我使用 vue-cli 提供的配置时，我尝试使用这个答案提到--no-cache的标志运行 Jest 。

我得到的错误如下：

这没有意义，因为./locales/es.json存在！而且，我尝试过使用与测试中完全相同的路线的 require ，它可以正确加载它的内容。

有任何想法吗？

我正在尝试使用动态导入 - import()

我已阅读此动态导入文档 并观看此chrome devtools 视频，

仍然找不到正确的方法。

错误：

Uncaught (in promise) ReferenceError: module is not defined

样板：

我创建了一个新项目。

没有 webpack，没有任务运行器。

只是运行带有这些文件的http-server节点包的服务器：

1. 索引.html
2. index.js
3. 一个.js

索引.html：

index.js：

一个.js

我在这里想念什么？

我目前正在使用require.context加载.vue文件名不以Async.

现在我想加载Async以require.context

通常动态导入语法如下所示：

这将通过承诺解决并动态导入组件。

出现的问题是，当您使用时require.context，它会立即加载（需要）组件，我无法使用动态导入。

有什么办法可以require.context和 Webpack 的动态导入语法结合起来吗？

https://webpack.js.org/guides/code-splitting/#dynamic-imports

假设我有一个文件<google-map>组件，它有一个模板，该模板有一个<widget>组件和一个<marker>组件。

如果我动态导入我的<google-map>组件，它将如下所示：

现在我知道我不需要谷歌地图组件之外的标记或小部件组件。

因此，当我的地图组件加载时，我还想导入该文件具有的所有导入，甚至最好一直到该树的底部。

所以我的地图、小部件和标记组件都将被分成一个块。

有没有办法在 Webpack 中自动执行此操作，而不是连续链接承诺或从Promises.all堆栈中解决承诺？

我想一种方法是将所有导入放在同一个块中，如下所示：

并为我想成为googlemap块的一部分的每个组件执行此操作，但这仍然是我希望可以自动化的东西的大量手动工作。

我一直在尝试importlib与 python3 (3.6) 一起使用。

目录结构

主文件

你好.py

文件夹/hello.py

观察

如果我做

hello = importlib.import_module('hello', package='./')或者

hello = importlib.import_module('hello')

它从根文件夹导入hello.pyhello world并打印.

如果我做

hello = importlib.import_module('folder.hello')

它从根文件夹导入文件夹/hello.pyhello world in folder并打印.

但如果我这样做

hello = importlib.import_module('hello', package='folder')或者

hello = importlib.import_module('hello', package='./folder')

它给出了错误

问题

我不确定这里发生了什么。我很确定我对 python 模块和包的理解有问题。有人可以解释为什么这是预期的行为吗？

我正在使用动态导入来加载用户在浏览器中编写的脚本。我首先将脚本内容放入一个 blob 中，然后使用 dynamicimport()将脚本作为模块加载。随着时间的推移，我希望这些脚本会改变并被销毁，因此相应的模块会被垃圾收集。但是，基于 Chrome 中的内存分析，这并没有发生。

原因似乎与一个叫做ModuleMap. 这是我在所有脚本不再使用后拍摄的内存快照的屏幕截图。

如您所见，Window 对象提供了通往这些模块的保留路径。只要是这种情况，我肯定最终会耗尽内存，因为每次用户编辑他们的脚本时都会创建这些模块。

我想知道是否有办法让 Chrome（和其他浏览器）在这些模块不再使用时卸载它们。

考虑如下所示的 react-admin 应用程序。我计划以一种所有内容都在'./posts'并且'./users'仅在用户登录后才加载的方式进行代码拆分。

我计划使用我可以使用的动态 import() 语法，以便webpack 自动开始对应用程序进行代码拆分。

我看到的问题是所有应用程序组件都是使用应用程序的定义导入的。动态导入内容'./posts'并且'./users'不会拆分，因为它是在应用程序本身导入的。

如何设置和拆分此代码库，以便仅在用户登录后才加载'./posts'和加载内容？'./users'

我在 webpack 捆绑后遇到了动态需要 js 文件的问题。

环境：

webpack、ts-loader、打字稿。

src/index.ts：

dist/test.js：

我不知道为什么，但是 webpack 认为没有文件：

1) 运行时警告webpack -p

2）运行脚本时出错：

3）我的 webpack 配置是：

预期的：

NodeJS 只是在 index.js 脚本执行时动态地需要路径。

请帮助正确设置。

谢谢！

请帮我重写代码以使用动态导入功能。不幸的是，我不知道如何在模块中使用动态导入。

我尝试了什么