React(@15.7.0) source code and Vite(^2.2.3).

When learning the source code of React, I used Vite as the scaffolding project. In order to understand the operation mechanism of each module of React, I needed to insert some logs and debugger statements into the source code and debug the code in the browser, which required frequent changes to the source code. Modifying the React Git source code and packaging it with Vite dependencies would be cumbersome and time consuming.

In contrast, it is much easier to modify the react-dependent code inside the Vite scaffolding node_modules. So I try to modify the node_modules/react – dom/lib/ReactMount _renderSubtreeIntoContainer * * * * in the js function, before the function returns by inserting a log, start the scaffold view the results, I was surprised to find that “Hello World” was not printed as expected.

After clearing the browser cache without success, I copied the Vite source code from Github to find out what was causing the dependency not to be updated.

Vite generates a. Vite cache directory under node_modules. If this directory exists when the application is started, it references the cache file directly without repacking the dependencies. This caused me to modify the source code I relied on and not get the desired results from the browser.

I wrote a script to remove the dependency (you can remove the cache by using the –force parameter).

Then add a script to package.json:

This way, when I’m done modifying the dependency module, I only need to run YARN Debug again to get the latest results.

But it’s still a hassle.

It is always necessary to manually kill the process and run it again after each dependency update

yarn debug
Copy the code

It would be nice to have hot updates, so that the front-end updates the content directly after modifying the dependency module.

So I took a look at the Vite hot update implementation (see the Vite Github source instead of the Vite scaffolding node_modules). First on the packages/vite/SRC/server/index, ts, chokider implements the file is used to monitor, listening is the root directory of the project root directory, and use the configuration ignored field exclude files do not need to listen, By default, Vite excludes node_modules and.git, so no matter how much you change the files in those two directories, they don’t trigger hot updates. If I want to debug my dependencies using hot updates, I need to remove “node_modules”. Then the packages/vite/SRC/node/server/HMR handleHMRUpdate function of ts, this function in the judgment, the way of updating the hot update, when configuring the file content changed, will trigger a server restart, when the client code change, The websocket is used to send hot update signals to the browser.

I need to clean up node_modules/. Vite, and then I need to restart the server to repackage the dependencies. All I need to do is put the process into the restartServer block, so I made the following changes to the code:

  1. In the packages/vite/SRC/node/config. The ts, modify UserConfig interface, add a extendsWatcher configuration items

  1. In the packages/vite/SRC/node/server/HMR. Ts, modify handleHMRUpdate function of logic

As mentioned earlier, to implement listening on node_modules, we need to implement one more step:

  1. In the packages/vite/SRC/server/index, ts, modify chokidar. Watch the second parameter, delete the ignored “/ node_modules / * * * *” string

At this point, the modification step is complete and you just need to run

yarn build-vite
Copy the code

A dist directory will be generated under Packages /vite and replaced with the node_modules/vite/dist directory in the scaffold.

Then, when you edit vite. Config. ts, you will find a configuration option extendsWatcher, indicating that the vite source code has been modified successfully

After writing the file or directory in node_modules that you want to listen to, run

yarn dev --force
Copy the code

You can implement hot updates of node_modules dependent modules.

I want to listen on react and react-dom modules, so my vite. Config. ts is:

When I modify any files in either directory, I trigger a server restart and debug the React code directly in the browser.

Ps: This change will greatly increase the startup time of vite because it listens to a large number of directory files in node_modules. Therefore, the changed vite version is only suitable for debugging dependent modules, and should not be used in normal project development environment.