Patch package cannot be used to patch pnpm

original text ：

https://lwebapp.com/zh/post/pnpm-patch-package

Introduce

In the front-end development process , Third party open source libraries are often encountered  BUG  The situation of , Usually we have the following treatment methods

• own  fork  A source code modification , After the repair, it can be packaged locally and used directly . If you want to share your research results with others , It can be transmitted to  npm  Warehouse or submit  PR  Feed source warehouse . There is a drawback to this approach , It is difficult to keep notes synchronized with the official library .

• Waiting for the library author to repair . This way is not very reliable , Because open source authors are usually busy , Your needs may not be at the top .

Some little friends don't know , There is also a plan for local  npm  Pack and patch . It means that your project is installing a  npm  Depending on , By adding a patch file to the project , You can put this  npm  Package changes are persisted to the project . In this way, we can realize the  bug  The fix is applied directly to the project .

Xiaobian learned that there was a man named  patch-package  Open source library , Can easily do to  node_modules  The library is patched . Next let's see how to use  patch-package , And what are the problems in the use process .

How to use  patch-package

Refer to the official tutorial , In a few simple steps, you can quickly give local  npm  Pack and patch .

• from  node_modules  Find  npm  Depend on the source code of the package , Fix errors in dependent packages

vim node_modules/my-package/common.js


• function  patch-package  Create a  .patch  file ,.patch  Files can be automatically  npm  Identify and apply

npx patch-package my-package


• Submit the patch file to share the fix with your team

git add patches/my-package+3.14.15.patch
git commit -m "fix common.js in my-package"


• Install the dependent package

npm i -D patch-package


• stay  package.json  Add a script to  postinstall, Support in  
  npm i
    Then it will be executed automatically  patch-package  Apply the patch to

 "scripts": {
 "postinstall": "patch-package"
 }


Because the small series used  pnpm  Package manager , In execution  

npx patch-package my-package

The time was wrong

**ERROR** No package-lock.json, npm-shrinkwrap.json, or yarn.lock file.

You must use either [email protected]>=5, yarn, or npm-shrinkwrap to manage this project's
dependencies.


It means to support npm、yarn Package manager , I won't support it pnpm.

The authorities do have  bug , As of the date of publication  2022  year  6  month  18  Japan , This problem has not been fixed .

Someone has given  patch-package  I mentioned  bug  了 , see

issue :How to execute patch to dependencies in other dependencies, when using pnpm #338

However, the capacity of Xiaobian is limited , We can only find another way , Take a workaround

pnpm  patch up

pnpm The package manager gives npm The idea of relying on packages for patching is , Copy the source file to be repaired , Put it in the project , At each execution  

npm i

  After installing the dependency , use nodejs The script copies the modified file to the source directory and overwrites the source code , Achieve the purpose of modifying the code .

• Modify node_modules Depends on the package source file , Copy to the following directory
  patches
  Under the table of contents

vim node_modules/my-package/common.js
cp node_modules/my-package/common.js patches/my-package


• Create a new script in the project postinstall.js, Implement the operation of overwriting the source code file

copyFileSync('./patches/my-package/common.js', './node_modules/my-package/common.js');

function copyFileSync(source, target) {
 var targetFile = target;

 // If target is a directory, a new file with the same name will be created
 if (fs.existsSync(target)) {
 if (fs.lstatSync(target).isDirectory()) {
 targetFile = path.join(target, path.basename(source));
 }
 }

 fs.writeFileSync(targetFile, fs.readFileSync(source));
}


• package.json  One more in postinstall The command points to our script

 "scripts": {
 "postinstall": "node scripts/postinstall.js"
 }


summary

The above is a small series in a use pnpm The project of package manager is implemented to npm Package patching scheme , If you have a better solution , Welcome to share .

Reference resources

• pnpm  Not available in  patch-package  patch up

• patch-package

• pnpm

• Hands teach you how to use  patch-package  to  npm  Pack and patch