preface

Sometimes when we use the package on NPM, we find a bug and we know how to fix it, but others may not be able to update it for a while, or we have special needs and others are not willing to fix it. In this case, we have to make a living by ourselves. So how should we modify other people’s source code? First of all, modifying node_modules files directly is not very good, and reinstalling dependencies will be gone. There are two commonly used methods:

  1. Download someone else’s code locally and put it insrcDirectory, manually import after modification.
  2. forkSomeone else’s code to your repository, modify, from your repository to install this plug-in.

The downside of both approaches is that updates are cumbersome, and we need to manually update the code every time. If the code we want to modify is just a small module of someone else’s code, and most of the rest of the code is left untouched, there is a very speculative option to use the Webpack Alias to override someone else’s code.

The role of webpack Alias

Webpack Alias is generally used to configure path aliases so that we can write less path code:

chainWebpack: config= > {
    config.resolve.alias
      .set(The '@', resolve('src'))
      .set(The '#', resolve('src/views/page1'))
      .set('&', resolve('src/views/page2'));
},
Copy the code

That is, webpack alias replaces the “shorthand path” we wrote, and it also works for files in node_modules. At this point we can replace the reference module path in someone else’s source code with our own file.

Specific operations are as follows:

  1. Find a module in someone else’s source code that needs to be modified and copy the code tosrcdirectory
  2. Modify thebug, note that all other files referenced in the directory must be written as absolute paths
  3. Find the path the module was introduced into (the path we need to intercept)
  4. configurationwebpack alias

Let’s actually do it

Take the Patchers module of the Qiankun framework as an example:

The file is referenced to:./patchers (the path we want to intercept)

The contents of the document are as follows:

Copy the content to SRC /assets/patchers.js, change its import path to an absolute path, and add our code:

Configure the Webpack alias (I’m using vue-cli4 and the configuration file is vue.config.js) :

const path = require('path');
module.exports = {
  chainWebpack: config= > {
    config.resolve.alias
      .set('./patchers', path.resolve(__dirname, 'src/assets/patchers.js'))}};Copy the code

Running the code, the console prints successfully, indicating that we have successfully overwritten someone else’s code, and when someone else’s code is updated, we can also synchronize the update, but this module’s code uses our own custom. It is also available after packing.

Supplement: usepatch-packageTo modify the

Using patch-package to modify the node_modules files is much easier, thanks to @leemagination

The steps are simple:

  1. The installationpatch-package:npm i patch-package --save-dev
  2. Modify thepackage.json, add commandpostinstall:
"scripts": {
+ "postinstall": "patch-package"
 }
Copy the code
  1. Modify thenode_modulesThe code inside
  2. Execute command:npx patch-package qiankun.

The first use of patch-package generates a patches folder in the root of the project that contains a diff record of the modified file.

Git apply –ignore-whitespace patches/qiankun+2.0.11.patch Among them, Qiankun +2.0.11.patch is the file name it generated.

At the end

This method is speculative and has many limitations, but it works well, and the technology just needs to be explored. Please point out any questions or mistakes.