1. Introduction to patch-package
patch-package npm address
patch-package github documentation
npm i patch-package
If you don't need to run npm in production (for example, if you are making a web front end, you can use --save dev)
1.2 How to use
To make a patch
first change a file for a specific package in the node_modules folder, then run
yarn patch-package package-name
or use npx (npm > 5.2)
npx patch-package package-name
package-name matches the name of the package being changed;
If it is the first time to use the patch package, a folder named patches will be created in the application root directory. Inside there will be a file called something like package name+0.44.0.patch, which is the difference between the plain old package name and the fixed version. Submit this to share the fix with your team.
| optional | describe |
|---|---|
| –create-issue | For packages whose source code is hosted on GitHub, this option opens a web browser with diff-based draft issues. |
| –use-yarn | By default, patch packages check whether to use npm or yarn based on the lock file they have. If you have both, npm is used by default. Set this option to override that default and always use yarn. |
| –exclude < regexp > | Paths matching regexp are ignored when creating patch files. Paths are relative to the root directory of the package being patched. Default: package\.json$ |
| –include < regexp > | Only paths matching regexp are considered when creating patch files. Paths are relative to the root directory of the package being patched. Defaults:*. |
| –case-sensitive-path-filtering | Make regexps used in --include or --exclude filters case-sensitive. |
| –patch-dir | Specifies the name of the directory where the patch files are to be placed. |
Nested packages
If trying to patch a package in a specific place like: node_modules/package/node_modules/another package, just put a / between the package name:
npx patch-package package/another-package
It also works with scoped packages
npx patch-package @my/package/@my/other-package
2. Modify the path of [hash].worker.js after vue-pdf is packaged
Note: The version of vue-pdf in this article is ^4.3.0; the
default packaging path of [hash].worker.js in the vue-pdf plugin is in the dist root directory. Due to the project deployment system, [hash].worker. js files into the dist/static/js directory.
2.1 Modify the file
Enter the directory node_modules/worker-loader/dist/index.js to find
const filename = _loaderUtils2.default.interpolateName(this, options.name || '[hash].worker.js', {
…… });
change into
const filename = _loaderUtils2.default.interpolateName(this, options.name || 'static/js/[hash].worker.js', {
…… });
2.2 Install the plugin
npm i patch-package --save-dev
npm i postinstall-postinstall --save-dev
2.3 Create a patch
npx patch-package worker-loader
After running, a file named worker-loader+2.0.0.patch will be created in the patches directory under the project root directory. After submitting the patch file, the patch can be applied later.
2.4 Add command
Add "postinstall": "patch-package" to the scripts of package.json, and when the npm install or yarn install command is executed later, the dependent package will be automatically patched.
"scripts": {
"postinstall": "patch-package"
}
2.5 Precautions
- The version of the dependent package to be modified should be fixed, that is, the version will not be automatically upgraded, so as to avoid the failure of the patch package after the automatic upgrade, so that the packaging failure will affect the original function;
- Collaborative development students need to reinstall the dependencies;