问题标签 [dynamic-import]

我正在尝试确定在使用 React Universal Component 2.0 使用动态导入时如何最好地编写单元测试

https://github.com/faceyspacey/react-universal-component

TestableComponent 是我要测试的组件。我想测试“ChildComp”是否正确返回。实际上，这涉及到很多逻辑和转换，但作为基本案例，我只是为了能够测试“ChildComp”是否存在。我正在使用通用组件来动态导入“ChildComp”

可测试组件.js

可测试组件单元测试

请注意，在第一个 debug() 中最初没有显示 ChildComp。只是加载组件导入尚未完成的信息。

在 waitFor(1000) 之后，您可以看到 ChildComp 可用。

问题：在结构测试之前使用超时让动态导入完成是否合适，或者是否有编程方式来确定动态导入何时完成？

我一直在使用 nextjs、react 和 redux，但我被卡住了。

我想 ssr 我的条件组件。我的代码有 3 个内容组件，如果用户根据上述条件单击导航栏组件中的链接，它们将呈现。该代码的工作方式与我想要的完全一样，但是当我在 Chrome 中查看源代码时，没有任何<Content />组件被渲染。这是我的代码：

我试图通过实现 AsyncCompoment 类来延迟加载 React 中的路由，如此处所述Code Splitting in Create React App。下面是教程中的 es6 asyncComponent 函数：

我已经在 typescript 中编写了这个函数，并且可以确认组件确实是延迟加载的。我面临的问题是它们没有被渲染。我能够确定组件对象在 componentDidMount 挂钩中始终未定义：

从 importComponent 函数返回的对象具有以下属性：

我修改了 componentDidMount 方法以获取该对象的第一个属性，即 MyComponent 类。在此更改之后，我的项目现在延迟加载组件并正确渲染它们。

我最好的猜测是我没有在打字稿中正确写下这一行：

我这样调用 asyncComponent 方法：

有人知道如何在打字稿中实现 AsyncComponent 吗？我不确定简单地获取 esModule 对象上的 0 索引是否是正确的方法。

最近偶然发现了动态导入提案和这个Youtube 视频。认为将它用于 React 中组件的按需导入是一个好主意。

import遇到一个问题，当将字符串文字作为运行时变量传递时，我无法“解析”路径。

例如：

尝试了 _fetchComp 的多个选项，但传递参数似乎不起作用。尝试的不同选项的细分。

1. 模板字符串 不起作用：单击时出现以下错误

错误：找不到模块“../components/Counter”。在 webpackAsyncContext (^.*$:53)

代码

2. 变量不起作用：在webpack构建期间出现错误 55:12-23

关键依赖：依赖的请求是一个表达式

3. 字符串文字 作品： 只是传递纯字符串文字。单击时，我可以在开发工具网络选项卡中看到正在下载的块

   代码

根据规范，

import() 接受任意字符串（此处显示的是运行时确定的模板字符串），而不仅仅是静态字符串文字。

所以我希望字符串文字能起到作用，但情况似乎并非如此。

我在flow issue tracker上遇到了类似的问题。但提议的解决方案再次提倡使用字符串文字。

我会给大家留下一个CodeSandbox 链接。

我在使用 reactjs 动态导入时遇到了一个奇怪的问题。假设我有一个组件，它的名字是ComponentA，它的路径就像myComponents/ComponentA. 现在，当我像下面的代码一样动态导入它时，它会运行良好：

但是，如果我在一个常量变量中定义我的组件路径，如下所示：

它会给我这样的错误：

错误：找不到模块“myComponents/ComponentA”。

有时，如果我只是向我的PATH变量添加一个空字符串，就可以解决问题，有时则不能。

任何关于正在发生的事情的想法将不胜感激。

当前设置

1. Webpack 与 React 在创建的设置中create-react-app
2. Babel React Intl 插件和管理器用于提取翻译字符串

期望的行为

babel 插件会生成一个文件，其中包含所有必须翻译的提取字符串。到目前为止，一切都很好。这发生在 webpack 和 babel 运行时（解析和编译代码）。

我想require将该生成的messages.json文件放入我的代码中，因为我必须在运行时将该文件发送到 API。

所以我想像这样使用动态导入的 Webpack 2 功能：

问题

Webpack 在编译时当然无法找到该文件，因此它会抱怨：

Module not found: Can't resolve 'translations/en.json'

如果我们这样做

然后将其中的所有文件intl/locale-data/jsonp/*.js编译输出。

如果我们知道language只能是enor ，有没有办法只编译特定的语言环境文件de？

我曾经像这样加载一个json文件：

现在我想使用动态导入：

失败：

我有一个导出所有 SVG 组件的索引文件：

然后稍后在应用程序中，我像这样使用它们：

因为我有很多这些图标，我想用react-lodable.

我试过了：

但这给了我一个错误：

warning.js?6327:33 警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

这可能是因为Icons.Twitter在某些时候PulsingCircleLoader没有静态Twitter属性。

我怎样才能解决这个问题？

我对 babel.rc 配置文件有疑问。

我搜索并看到了两个不同的配置文件示例。

和

我的问题是：

1）es2015预设和env预设有什么区别？

2）为什么我们需要模块选项为假？我知道它指示 Babel 不要尝试解析导入。但我们究竟为什么需要它？

3）动态导入怎么样？为什么我们需要使用插件？modules:false选项之间有什么关系吗？

4）浏览器对动态导入的支持如何？babel 可以将其转换为 ES5 吗？动态导入和代码拆分可以在 IE10 或 IE11 上工作吗？我们如何确定哪个浏览器支持动态导入和代码拆分？