The background,

The whole team used React + ANTD4 to build the front page. During the development, I found a bug in antD4.9.* input. TextArea component, which showed that the maxLength attribute limit did not meet the expectation. This attribute will limit the number of pre-typed pinyin words corresponding to Chinese, resulting in the length of Chinese characters. After checking the Github warehouse Issue and related Changelog, it was found that the official fix was made in v4.15.*.

Like most people, my first thought was to upgrade ANTD to the latest version. After the upgrade, the problem was solved

But has the problem really been solved? Things are often not as smooth as expected, I thought A wave of happy upgrade has been perfect to solve the problem, but the good times did not last for A week, small A students sent greetings: “I found a bug in ANTd v4.15.3 where the Upload component couldn’t trigger the beforeUpload hook on Windows, and new functionality was rushed so I set ANTd to version 4.9.4”. Such bad news hit heart nature is a thousand kinds of discomfort, between a dilemma emerged in the mind before the early heard but has been negligent in the attempt to patch the law, without words began to operate.

Patch the NPM package

1. Install patch – package

npm i patch-package --save-dev
Copy the code

2. Modify the NPM package

In order to avoid unknown bugs in other components before V4.15.3, we patched the Upload component based on 4.15.3.

Open the target project code node_modules folder and make sure it is version 4.15.3

Open an unused project, install v4.9.4 and also open the ANTd directory

Copy the upload component code we want to modify from 4.9.4 to 4.15.3 using the copy method. Then NPM run dev starts the project to test whether the upload component bug is fixed.

3. Generate patches

The result is as expected. Then, CD to the root log and run the following command to generate the patch file:

npx patch-package antd
Copy the code

In this case, you will get the following files in the root directory

Git diff: Git diff: git diff: Git diff: Git diff: Git diff: Git diff: Git diff: Git diff: Git diff Generate a patch file in the root directory of the project.

4. Add the version management

Now that the patch file has been generated, we need to commit it to Git and perform regular Git operations directly:

Git add patches/antd+4.15.3. Patch Git commit -m "feat: Add ANTDCopy the code

5. Improve the NPM script

How to apply patches when other colleagues pull code? Based on the above operations, we can execute the patch-package command after NPM install. This process can be realized by using NPM script, adding the following fields and contents in package.json script:

{
    "postinstall":"patch-package"
}
Copy the code

Perform a completed dependency installation -> Build Release, and everything is as expected

Other means

In fact, the simple modification of NPM package method is not only the patch-package introduced in this paper. Only by comparing other methods can we understand why patch-package is the optimal solution.

1, single file modification method

The principle is to first find the NPM package file to modify, first copy this file to the project directory, then modify the file content and use

  • Copy overlay method

/node_modules/ the package name/the original file is copied to postinstall./node_modules/ the package name/the original file is copied to postinstall.

"scripts": {
    "postinstall": "cp ./patches/upload/* ./node_modules/antd/lib/"
}
Copy the code

That is, the original file logic is overwritten with the modified file after each install package.

  • Modified citation

Configure a Webpack alias, such as’ original file reference path ‘: ‘modified file reference path’, so that the final modified file is referenced, such as:

resolve: {
      alias: {
          'antd/upload': path.resolve(__dirname, './patched/upload/*'),}}Copy the code

2. Overall copy project method

Copy the entire project source code of the package you need to modify, modify it, and then use it

  • Direct reference method

    Use the finished source code directly, no longer through NPM package reference.

  • Publish private library law

    Suitable for scenarios where several projects are using an NPM package, you can publish the modified source code to a private NPM repository for use by projects, so that multiple projects only need to modify the source code once

3. External code modification method

Instead of modifying the node_modules source code directly, use the js feature to modify the internal properties of the package at runtime.

To put it simply, it is to use defineProperty, Prototype and other features to modify the class in the package. For example, it is not appropriate to use defineProperty to do data hijacking and proxy for component instances in Vue2.0. In vue projects we often attach global properties and methods to the vue root instance in main.js via vue.prototype. XXX = XXXX.

4. Advantages of patch-package

Although the above three methods can solve the problem in some specific scenarios through some operations, they cannot avoid the trouble caused by the version upgrade. If the NPM package is upgraded, it may cause the original change error, so if you want to use the above three methods, it is best to write the version number dead. However, patch-package has the following features:

  • Version of the trial and error

    **ERROR** Failed to apply patch for package XXXX at path **ERROR** Failed to apply patch for package XXXX at path You can locate the problem more easily by prompting

  • Save a space

    Using Git diff to record patches is more space-efficient, secure, and convenient than rewriting a source code

conclusion

Through the introduction of this paper, I believe you have a good understanding of patch-package, which can gracefully solve the problem of having your cake and eat it both ways in daily development. However, although patches can avoid the wind, they are not as warm as new clothes. When problems arise, it is better to seek the most fundamental solution from formal channels. For example, issue to the official and pay attention to version updates and bug fixes, so as to timely update or remove patches. I hope the patch can get a new dress as soon as possible