Modify node_ Correct posture of files in modules

Time:2021-10-24

preface

We often encounter this situation during development:

  1. There is a bug in the NPM package on which you depend, and others will not be able to update it for a while

  2. Some parts need to be modified if they do not meet their own needs (such as some UI frameworks)

Then we have to modify the node at this time_ Directly modifying the source code in modules will lead to two problems:

First, there is an update problem. After reinstallation, the modified files will be overwritten

Second, the synchronization problem, node_ The files in modules are generally not submitted to the code base. How can other team members update synchronously? You can’t manually send it to others every time you change it.

There are two solutions you may think of first:

  1. Copy all other codes to your SRC directory and import them after modification

  2. Download other people’s code locally, modify it, republish it as a package, and then install the package you released yourself

However, both solutions have the above-mentioned update problem. When the dependent package has updates, it is impossible to automatically synchronize the updates. Moreover, when we introduce dependency packages, we often introduce compiled code, which will lead to manual compilation after modifying the code every time. It is very troublesome. Is there any other better solution? The answer is yes. I think of several solutions. Let’s analyze them one by one.

explain

All of the following solutions are demonstrated with the request package as an example.

npm link

NPM link is equivalent to establishing a soft connection to link the packages we depend on to the modified packages. This is often used when debugging local packages. Let’s do it in practice.

  1. From the warehouse of fork request to its own warehouse, I name it request study here

  2. Clone to local

  3. Enter the request study directory and executenpm link

    Modify node_ Correct posture of files in modules

  4. Enter our project directory and executenpm link request

    Modify node_ Correct posture of files in modules

  5. Modify the code in the package file. The directory we modified here is request study / lib / auth.js

    Modify node_ Correct posture of files in modules

In this way, when the files in the package are updated, they will be automatically synchronized to the project, which solves the above update problem. One disadvantage is that when the dependent package is updated, other team members also need to pull the latest dependent package code.

webpack alias

Webpack alias is used to configure aliases, such as:

chainWebpack: config => { 
 config.resolve.alias 
 .set('@', resolve('./src')) 
 .set('request/a', resolve('./src/a'))
}

Therefore, we can use webpack alias to proxy the files to be modified into our own project files. The operation steps are as follows:

  1. Find the files that need to be modified in someone else’s source code and copy them to the SRC directory

  2. Modify the code. Note that other file paths referenced in it need to be changed to absolute paths

  3. Find the path where this module is introduced(We need to intercept the path

  4. Configure webpack alias

Let’s do it.

Our revised documents are as follows:

Modify node_ Correct posture of files in modules

The path where the file is referenced is. / lib / auth (the path we want to intercept)

Modify node_ Correct posture of files in modules

Copy the auth.js file to Src / assets / auth.js, change the path introduced as the current request package in the require path to an absolute path, and add our code

Modify node_ Correct posture of files in modules

Configure webpack alias (I use vue-cli4 here, and the configuration file is Vue. Config. JS). The configuration code is

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

Start our project, and the console prints out the code we added, indicating that our code was added successfully.

Modify node_ Correct posture of files in modules

When the code that depends on the package is updated, we can also update it synchronously, and other team members do not need to do other additional operations when synchronizing the modified code. One disadvantage is that when the modified dependency package is introduced in the configuration file (such as Vue. Config. JS), this will not take effect.

yarn patch

This requires V2 version of yarn. The specific steps are as follows:

  1. Globally install the latest version of yarn:npm install -g yarn, here’s an explanation. If you installed the application version before, you need to uninstall and then run this command. Otherwise, after the installation is completed, it will still be the previous yarn version.

  2. Enter your project directory and runyarn set version berryCommand.

    Modify node_ Correct posture of files in modules

  3. implementyarn patch requestcommand

    Modify node_ Correct posture of files in modules

  4. Modify the code in the file path shown above

  5. Create a new patches folder in your project root directory and executeyarn patch-commit C:UsersTWITTY~1AppDataLocalTempxfs-f6241b39 > E:vue-cli4patchesrequest+2.88.2.patchIn this way, you can see that a request + 2.88.2.patch file is generated under the patches file, which stores the diff content of the code you just modified.

  6. Modify the package.json file as follows:

    - "request": "^2.88.2" 
    + "request": "patch:[email protected]^2.88.2#./patches/request+2.88.2.patch"
  7. Rerun yarn and start the project, and you can see the changes after the dependent package code is modified

    Modify node_ Correct posture of files in modules

This method solves the above problems of updating and team member synchronization. The disadvantage is that the operation is cumbersome and depends on the V2 version of yarn.

Possible problems with yarn patch:

  1. functionyarn set version berryIf an error like the following occurs

    Modify node_ Correct posture of files in modules

    You may need to use an agent. The method of configuring the agent from the command line is as follows:

    windows:

    set http_proxy=http://127.0.0.1:1080
    set https_proxy=http://127.0.0.1:1080

    mac:

    export http_proxy=http://127.0.0.1:1080
    export https_proxy=http://127.0.0.1:1080
  2. functionyarn patch requestIf the following occurs during command, you need to delete the yarn.lock file and execute it againyarn install

    Modify node_ Correct posture of files in modules

    For details, please refer to my other article –Record the problems encountered when using yarn patch once

  3. functionyarn patch requestIf the following situation occurs during the command, it indicates that multiple versions of packages coexist. You can select the specific package version you want to modify. For example, if I want to modify version 2.88.2 of request, execute ityarn patch [email protected]:2.88.2

    Modify node_ Correct posture of files in modules

patch-package

The operation steps are as follows:

  1. Modify the package.json file as follows:

    "scripts": {
    + "postinstall": "patch-package"
    }
  2. To install patch package:npm i patch-package -S

  3. On node_ Modify the code of dependent packages in modules

  4. Execute the command after each code modificationnpx patch-package request

Finally, a patches folder will be generated in the root directory of the project, which holds the modified file records.

Modify node_ Correct posture of files in modules

As you may have seen, this solution is very similar to yarn patch. Yes, patch package can be regarded as a simplified version of yarn patch. It is equivalent to encapsulating the cumbersome operation of yarn patch.

summary

Let’s summarize four methods:

When other members of NPM link team update, they need to update and modify the dependent package at the same time;

Webpack alias is not applicable to the package that the configuration file depends on;

Yarn patch needs to upgrade yarn to V2 version, and there are many operation steps;

Patch package can be regarded as an alternative to yarn patch, which simplifies many operations of yarn patch and is an ideal solution.

last

It’s not easy to code. If you think it’s helpful to you, please move your lovely little finger to help you praise;

If you have other solutions or problems, you are also welcome to leave a message.

reference material:
https://juejin.cn/post/6844904163558555662
https://yarnpkg.com

Recommended Today

SQL exercise 20 – Modeling & Reporting

This blog is used to review and sort out the common topic modeling architecture, analysis oriented architecture and integration topic reports in data warehouse. I have uploaded these reports to GitHub. If you are interested, you can have a lookAddress:https://github.com/nino-laiqiu/TiTanI recorded a relatively complete development process in my hexo blog deployed on GitHub. You can […]