background

One problem we often encounter is that existing open source plug-ins on the web don’t meet the expectations of our actual projects. But if only minor changes to the source code are needed to meet our needs, then changing the source code must be the first choice

preface

There are several ways to modify someone else’s source code:

  1. Go to node_modules and find the source code of the plugin.
    • Advantages: simple and direct, quick effect
    • Disadvantages: Can not persist, once re-installed will not work; It is not convenient for team members to use the modified code
  2. Fork the code to github and publish it to NPM.
    • Advantages: The modified code is available to all team members
    • Faults: troublesome, very troublesome

Obviously, these two methods are neither elegant nor reliable. As programmers, we can’t be bothered by this. The open source community has a solution ready for us: patch-package

Use the patch

Start a project through CRA

npx create-react-app my-app
cd my-app
npm start
Copy the code

To project @alifd/ Next (UI library), patch-package, postinstall-postinstall (required for yarn installation, NPM does not need to install this dependency)

yarn add @alifd/next patch-package postinstall-postinstall -D
Copy the code

Add script commands to package.json file (very important, whether we use YARN or NPM, this command will be automatically executed after the whole installation to patch packages in node_modules)

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

We introduce the component button and look at the current structure of the component

Let’s go to node_module and modify the button source code

We are looking at the page (if it doesn’t work, you can restart the service)

After the modification is complete and has taken effect, we need to install patches. Run the yarn patch-package package-name command

yarn patch-package @alifd/next
Copy the code

Upon success, you will see a patches folder in the root directory that contains the patch files for the NPM package you modified. Click on it to see exactly what changes you’ve made. 1.22.21 in the file name is the version number of the dependency package, indicating that the patch only takes effect for plug-ins of version 1.22.21

test

Delete node_module and reinstall it

rm -rf node_modules/ && yarn
Copy the code

After the dependency package is installed, you can see the patch applied on the command line (bottom 5 lines)

[a quarter] 🔍 Resolving packages... (2/4) 🚚 Fetching packages... [three] 🔗 Linking dependencies... Warning "> @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=7.21.4". Warning "The react - scripts > @ typescript - eslint/eslint - plugin > [email protected]" from the unmet peer dependency "typescript @ > = 2.8.0 | | > = 3.2.0 - dev | | > = 3.3.0 - dev | | > = 3.4.0 - dev | | > = 3.5.0 - dev | | > = 3.6.0 - dev | | > = 3.6.0 - beta | | > = 3.7.0 - dev | | > = Warning "> @alifd/[email protected]" has unmet peer dependency "@alifd/meet-react@^2.0.0". Warning" > @alifd/[email protected]" has unmet peer dependency "moment@^2.22.1". Warning "> @alifd/[email protected]" has incorrect peer Warning "> @alifd/[email protected]" has incorrect peer dependency "react-dom@^16.0.0". [4/4] 🔨  Building fresh packages...$ patch-packagePatch - package 6.4.7 Applying patches... @alifd/[email protected] ✔ ✨ Done in 20.10s.Copy the code

Yarn start restart, view the review element, still a tag!

The end of the

This article is very short, but very useful. If this article inspires or helps you, give it a thumbs up! 😊