问题标签 [dynamic-import]

关于替换加载了 Node.js 的模块，我很难理解 ES6 动态导入语法require。

这是我的原始代码的相关部分：

这是我最初尝试使用动态导入语法的方法：

但是，它不起作用 - 它返回一个承诺而不是一个函数。我确信这是预期的行为，我之前没有接触过承诺，所以我发现很难改变我的思维方式，只是不明白。

我错过了什么？如何修改上面的代码以使用动态导入？

我需要一些机制来在浏览器中重新加载动态导入的 JS 文件（使用import()）。当我使用简单<script src='index.js'>加载时，这个任务可能会这样解决：<script src='index.js?v=1.4.2'>. 如何使用与动态导入类似的东西？有什么方法可以将哈希添加到由 Webpack 文件的名称生成的吗？

我刚刚用 react-js 弄脏了我的手，并且遇到了这段代码，用于在我的应用程序中动态导入我似乎无法理解的组件？

有人可以解释一下我突出显示的代码行吗{组件} 也是？

大家好，我一直在尝试动态导入，以便为使用 CRA（create-react-app）创建的应用程序渲染我的组件，虽然它在某些情况下完美运行，但对于某些情况，它返回无法加载模块错误，例如我加载了组件（放置在 src 下的目录中）在我的动态中index.js工作正常，但是当我尝试在其中渲染子组件或嵌套组件时，它也使用动态导入方法给出错误无法加载模块。请注意，仅当嵌套组件放置在原始父组件的目录之外时才会发生此错误，这里是代码。

我的 index.js 放在 src 下。

FirstComponent.js 放在 src 下的 Components 目录下。

Footer.js 放在 src 下的 FooterComp 目录下。

index.js当我从我的第一个组件中引用我的第一个组件但在尝试导入我的第一个组件时对页脚组件不起作用时，为什么这会起作用？

错误信息：Error: Cannot find module '../FooterComp/Footer'

另请注意，如果我将页脚组件放在与 Firstcomponent 相同的目录中并调整路径它工作正常

我想将组件路径从父反应组件传递给子反应组件，并且该子组件应在道具准备好时导入组件，但动态导入依赖于传递的值应该是字符串而不是要解析的值运行时，任何事情都可以帮助我

例子

编辑：我试过 System.import 不工作

我想知道是否可以同时使用 React 16 的惰性、Suspense、createRef 和 forwardRef 特性来附加对动态导入组件的引用。有谁知道这是否可能。我试图按照这个例子（https://github.com/facebook/react/pull/13446/commits/4295ad8e216e0747a22eac3eed73c66b153270d4#diff-e7eafbb41b012aba463f5a2f8fc00f65R1614），但它似乎不太适用于动态导入的组件。

通过在父组件中设置自定义道具，将其传递给子组件，然后在子组件的渲染函数中将 ref 设置为该道具，我已经能够获得类似的所需行为（下面的示例）。我对这种方法的唯一问题是它可能不是最干净的解决方案，并且可能难以在大型团队中保持实施的一致性。尝试将 ref 放置在实际组件上时，它也会变得更容易。

// 工作（不需要的实现） // Parent.js

// Child.js

///////////////////////////////////////// //// // 使用 React.forwardRef() 实现所需的实现

//父.js

// Child.js

直接在延迟加载的组件上设置 ref 总是返回 null。如果它返回来自 React.createRef() 的值，那就太好了。

我有使用 webpack 捆绑的（多态）代码，包括动态导入（用于代码拆分），并且希望在 NodeJS 中运行相同的代码，目前使用babel-register来运行 ES6 代码。

当涉及到动态导入时，我遇到了一个问题：已解析/加载的模块似乎被包装在一个额外的（默认）模块中。

以下是一个最小示例，使用NodeJS v10.14.1, @babel/core@7.2.2, @babel/plugin-syntax-dynamic-import@7.2.0, @babel/preset-env@7.3.1, @babel/register@7.0.0:

index.js：

dep.js：

main.js：

通过node --experimental-modules index.js收益率运行它：

“正常”导入按预期工作，并直接为对象提供导出。动态导入在捆绑的浏览器版本中也这样做（如我所料），但[Module] { default: .. }在 NodeJS 中返回这个东西。

不使用babel-register代码运行而不是使用babel-node ( @babel/node@7.2.2) ( npx babel-node --experimental-modules --plugins=@babel/plugin-syntax-dynamic-import --presets=@babel/preset-env index) 会产生相同的结果。

我需要使用实验标志运行它，否则动态导入根本不起作用（Not supported抛出错误）。

我可以通过在添加的层下方访问动态加载的模块，而不会出现进一步的问题mod.default.bar，但是对于浏览器和 NodeJS，我的代码会有所不同。

我很感激对此行为的任何解释，也许是获得正常/预期导出对象的解决方案（/我出错的地方）。

我目前正在使用这个助手作为解决方法：

并像这样包装每个import()：

我今天第一次使用 Webpack 学习Vue.js，并试图让路由器使用惰性/动态导入。

我想使用惰性/动态导入，因为我正在重建我的内容管理系统，该系统有很多页面，在用户会话期间可能会或可能不会使用，因此在需要时动态加载他们需要的模块更有意义关于我的申请。

我非常基本的路由器目前看起来像这样：

但是，我遇到了以下编译错误：

./src/router/index.js 中的错误模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：语法错误：...../src/router/index.js：支持当前未启用实验语法“dynamicImport”

附加说明：

将 @babel/plugin-syntax-dynamic-import 添加到 Babel 配置的 'plugins' 部分以启用解析。

并告诉我哪一行是问题，这很明显：

几个月前我在自己玩 Webpack 时就意识到了这个错误，所以我知道我必须安装动态导入插件才能使它工作。

这是我安装的：

我在我的babel.rc配置文件中提供了这个插件并运行npm run dev重新编译所有内容：

但我仍然收到错误，我仍然无法使用动态导入功能！难道我做错了什么？有没有其他人在让动态导入工作时遇到麻烦？

我的 webpack.config 文件：

我的 package.json 文件：

预计分块输出 About-vue.de9bf8b8.js app.cb7314dd.js chunk-vendors.cc2e3269.js Home-vue.de9bf8b8.js.map

但实际结果是 [request].de9bf8b8.js app.cb7314dd.js chunk-vendors.cc2e3269.js

当我省略 [request] 或尝试使用类似的功能时

在这种方法中它可以工作，当我省略 [request] 时它也可以正常工作，但是如果没有正确的名称，我的包很难管理和调试

我正在尝试部署使用 @babel/plugin-syntax-dynamic-import 的 reactjs 应用程序，该应用程序在我的本地主机上运行良好，但是当我在 netlify 上部署它时，只有根 url 有效（例如：mysite.netlify。 com），所有其他带有 slug 的 url（例如：mysite.netlify.com/Visit）都不起作用，即使我已经定义了路由并在我的本地主机上工作，它也只是返回未找到的 404 页面。

我的 .babelrc 文件中有以下设置

在我的 package.json

我的 App.js 上有以下导入

有什么遗漏或者我需要让它在netlify上工作吗？