如何在不重建的情况下改善浏览器内 CSS/React 开发体验？

Question

我的团队维护一个旧的coffeescript+knockout UI，我们正在慢慢地用现代的React 代码替换其中的部分。该项目有一个复杂的构建系统，但我们已经能够将 create-react-app 挂接到其中并将捆绑的文件注入到主应用程序中。这可行，但重建成本很高。

我怎样才能通过在浏览器中编辑任何内容来改善我们的开发体验，而不是等待每次更改都完全重建？

在某些情况下，我们可以只使用很棒的 CRA 开发服务器，但我们经常依赖应用程序其余部分的样式和代码，因此很难完全隔离地处理每个组件。

谢谢！

Answer 1

对于 CSS，您始终可以使用浏览器的开发工具更改样式，直到它看起来不错，然后您从开发工具复制到您的应用程序，并且只需要重新构建一次。

对于 JS，您可以使用 Hot Module Replacement (HMR) 作为 webpack 插件（不包含在 CRA 中，您必须使用 eject）。