更改node_modules中的软件包时，如何触发React的热重载? [英] How to trigger hot reloading for React when a package in node_modules is changed?

问题描述

我正在构建一个React组件库和其他文档项目.我的目标是立即将库的所有更改直接显示在文档中.

I am building a React component library and additional documentation project. My goal is to display immediately all changes of the library straight into the documentation.

到目前为止，我已经配置了webpack来监视组件中的更改.重建后，我将输出文件夹移到文档的 node_modules 中.这样，我可以将组件库用作外部程序包进行仿真.

So far I have configured webpack to watch for changes in the components. After rebuilding, I take the output folder and move it in the node_modules of the documentation. This way I can simulate using my component library as an external package.

该文档是一个 create-react-app 项目，默认情况下，它不监视 node_modules 中的更改.我遵循了此答案，并执行了 eject 脚本.我在 webpackDevServer.config.js 中更新了 ignoredFiles 变量，并且一切正常.我更改了一个组件，重新打包了webpack，更新了文档的 node_modules 中的包，然后触发了重建.但是，我必须刷新浏览器才能看到更改.当我对文档的来源进行更改时，会发生热重装，但是当我在 node_modules 中更新该特定软件包时，触发它会很棒.有办法实现吗?

The documentation is a create-react-app project and by default it does not watch for changes in node_modules. I followed this answer and executed the eject script. I updated the ignoredFiles variable in webpackDevServer.config.js and everything is working really fine. I make a change in a component, webpack recompiles, updates the package in the node_modules of the docs and then a rebuild is triggered. However, I have to refresh the browser to see the changes. Hot reloading happens when I do a change in the source of the docs, but it will be great to trigger it when I update that specific package in the node_modules. Is there a way to achieve that?

感谢您花时间在此上！

推荐答案

您可以设置指向包的本地依赖项.

You can setup a local dependency that points to your package.

"dependencies": {
  "package-name": "file:../relative/path/to/your/package"
}

然后，当您创建依赖项时，以监视方式重建包含package.json的模块的相对路径，就可以开始了！

Then, when you created the dependency, rebuild the relative path to the module containing your package.json in watch mode and you are ready to go!

这篇关于更改node_modules中的软件包时，如何触发React的热重载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！