问题标签 [react-hot-loader]

我有一个简单的 webpack，带有 react hotloader 和 express 设置和工作。我正在尝试添加一个外部节点模块，该模块将为某些服务注册一个子路由器。出于某种原因，这样做会导致一个奇怪的异常（见下文）。

例外：

更新 结果是从.babelrc 我启用了一些反应转换的地方删除它，然后删除所有的 webpack hotloader 插件和中间件，让路由器再次工作。

当我使用命令运行构建时，我遇到了这个问题npm run build：

webpack.config.js

和 app.jsx

我做错了什么？这是我没有继续前进的第二天。我正在尝试使用 SCSS、jsx、react-hot-loader，但这不起作用。

通常，当您1+1在 Chrome 控制台中输入类似内容时，它会做两件事：

• 将你的表情回馈给你
• 显示计算表达式的结果

这就是为什么当您进入var x = 1控制台时，您会看到控制台中添加了两行：

• > var x = 1
• <- undefined

因为这个var作业的计算结果为undefined。

我正在使用 react / redux 开发一个 webapp，最近我试图在控制台（1 + 1）中评估一些东西。令我震惊的是，控制台拒绝了我！我确实看到我的声明回响给我，但我没有看到结果。

输入多个内容（随机乱码与Enter按键）表明所有内容都被回显，但没有评估任何内容（即：我在控制台上抛出随机字符串时看不到undefineds 或s ）。ReferenceError

1. 控制台在同一窗口中的其他选项卡中运行良好。
2. 我的应用程序按预期工作。
3. 我的应用程序是使用react和redux构建的
4. 我正在使用webpack-dev-server在本地运行我的应用程序
5. 我正在使用带有react-hot-loader和 webpack HotModuleReplacementPlugin的热更新
6. 我继续看到通过我的应用程序正在执行的各种操作将 XHR 记录到控制台。
7. 我仍然可以看到console.log我的应用程序生成的消息。

我运行 CPU 分析器（在 devtools -> 配置文件选项卡中）一段时间，然后在应用程序周围单击了一下 - 分析器没有显示异常活动（例如锁定），只是使用我的应用程序时的预期行为。

什么可能导致 Chrome devtools 控制台忽略直接输入？

我正在使用 React-Router 并且刚刚更新了我的路由以合并嵌套的 URL，它似乎破坏了 Webpack 的实时重新加载：

有没有人使用 webpack 热重载也看到这一点？现在，除非我在 localhost:8000/ 或 localhost:8080/dashboard，否则每当我保存更新时，实时重新加载都会中断，并会出现一个简单地指向 index.html 中的 app.js 的神秘（无用）错误

有没有比我上面展示的更好的方法来合并嵌套路由？

我需要一个基本 / 端点，我需要一个 /dashboard 端点，然后是所有这些嵌套端点。稍后我计划添加更多与 /dashboard 并行的顶级端点（例如 /widget）

我使用 React + Redux + Webpack + WebpackDevserver。一旦热加载器启动，我所有的减速器都会重置为初始状态。

我可以以某种方式将我的减速器保持在实际状态吗？

我的 Webpack 配置包含：

我的减速器统计数据：

我通过以下方式启动我的 Webpack Dev-Server：

这是我第一个使用react, react-router,react-hot-loader和. 当我更改 react 组件中的代码时，热加载器生效，但同时控制台告诉我一个警告：webpack-dev-serverwebpack

不能更改《Router routes》；它将被忽略。

我不知道如何解决这个问题。有代码：

网络包代码：

索引代码：

谢谢你 ！！！！

我开始学习使用 redux 做出反应，我真的很想在我的旅程中使用这个https://github.com/davezuko/react-redux-starter-kit入门项目。

它干净、简单，我想用它做一些比现在更大的东西。为此，我需要后端服务器。我已经用 express 写了一个，并且一直在我的 Angular 应用程序中使用它。但我根本无法理解如何让它与这个入门工具包一起工作。它使用在端口 3000 上运行的 koa 来实现热重载功能，我不能让这两个（热重载/api）同时工作。对于有经验的人来说，插入所有这个简单的快速服务器应该很容易，一个路由也在端口 3000 上运行，我应该能够找出其余的。

我会和你分享我的代码，但我没有，因为我什至不知道从哪里开始。有这么多的插件/移动部件，你需要了解它让我头晕目眩:) 所以我的计划是开始使用所有这些进行一些项目，并一路学习一切。

我想要一个这样的项目结构：

你可以猜到，这个项目就像 NPM 小部件子项目的聚合，而 appsrc文件夹是真正的应用程序，它使用不同的小部件子项目。

我希望在小部件之间进行清晰而严格的分离，因为我目前的经验告诉我，即使我告诉他们，开发人员也倾向于在小部件之间引入不需要的循环依赖关系。

在实践中，所有这些小部件都是 ReactJS 小部件，其中大多数都有 3 个常见的 JS 库：React、JQuery 和 Lodash。有些不需要这 3 个库，有些需要额外的库packery，例如. 他们绝对需要共享完全相同的通用库版本（因为显然我不希望在我的项目中使用不同版本的 React，也不希望增加我的包大小）。react-slickreact-date-pickermocha

例如， -widget1可能是 DatePicker 小部件，它依赖于 React + Lodash + react-date-picker（npm lib，不是我的） - 应用程序项目可能依赖于 React + Redux + Normalizr + 所有小部件及其传递依赖项，例如react-date-picker

所有的小部件都将是展示组件，不需要更多花哨的依赖项。有些将只依赖于 React。有些可能有 Redux reducer，但由于它是普通的旧 JS 代码，因此不需要依赖项。

小部件的数量可能非常大，我不想在每次库更新时编辑 200 个 package.json 文件（但我最终可以使用一些代码来处理它）。

在里面widget1/src时，应该禁止从widget2. 如果一个小部件必须能够依赖于另一个小部件，则必须在客户端小部件的 package.json 中明确设置此依赖关系。

我应该能够使用 Webpack 构建并独立测试所有小部件。我还应该能够同时构建和测试整个项目，包括所有子项目，并拥有一个汇总的全局测试和代码覆盖率报告。

我不希望它给开发者带来不好的体验。React 和 Webpack 允许重新加载热代码。如果我的浏览器中有真正的应用程序并且我修改了小部件的代码，我应该能够实时看到更改，react-hot-loader而不必运行 npm 命令或按 F5。

我寻找的是相当于 Java Maven 的dependencyManagement系统，您通常在 parent 中为所有子项目设置版本POM，并且版本以某种方式继承给所有子项目。所有子项目都不能互相看到（除非添加了显式依赖项），但它们可以说它们依赖于父项目中声明的库。所有的 lib 版本号都可以在父项目中设置。

使用 NPM 和 Webpack 可以做到这一点吗？

或者至少是接近它的东西？

谢谢

react-hot在我按照本教程在数组中添加加载程序后出现此错误： https ://thoughtbot.com/blog/setting-up-webpack-for-react-and-hot-module-replacement

我得到Error: Cannot define 'query' and multiple loaders in loaders list。

我已经升级到 Babel 6 并试图让它与 react-hot-loader 一起工作，在 webpack.config 文件中，我有这个：

上面的配置给出了这个错误：

Webpack 可能会混淆查询是 forreact-hot-loader还是babel.

我该如何解决这个问题？