Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to modify the files in node_modules

2025-01-31 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to modify the files in node_modules". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to modify the files in node_modules.

The role of webpack alias

Webpack alias is generally used to configure path aliases so that we can write less path code:

ChainWebpack: config = > {config.resolve.alias .set ('@', resolve ('src')) .set (' #', resolve ('src/views/page1')) .set (' &', resolve ('src/views/page2'));}

In other words, webpack alias replaces the "abbreviated path" we wrote, and it also works for files in node_modules. At this point, we can replace the path of the referenced module in other people's source code with our own file.

The specific operations are as follows:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Find the module that needs to be modified in someone else's source code, and copy the code to the src directory

Modify the bug in it. Note that all other files referenced in it need to be written as absolute paths.

Find the path where this module was introduced (the path we need to intercept)

Configure webpack alias

Put it into practice.

Take the patchers module of the qiankun framework as an example:

The path to which the file is referenced is:. / patchers (the path we want to intercept)

The contents of the file are:

Copy the content to src/assets/patchers.js, change its import path to absolute, and add our code:

Configure webpack alias (I use vue-cli4 and the configuration file is vue.config.js):

Const path = require ('path'); module.exports = {chainWebpack: config = > {config.resolve.alias .set ('. / patchers', path.resolve (_ _ dirname, 'src/assets/patchers.js'))}}

Run the code, the console prints successfully, indicating that we have successfully overwritten other people's code, and other people's code has been updated, we can also update synchronously, but the code of this module uses our custom code. It's okay after packing.

Add: use patch-package to modify

Under the guidance of @ Leemagination, it is more convenient to use patch-package to modify files in node_modules.

The steps are also simple:

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Install patch-package:npm I patch-package-- save-dev

Modify package.json and add the command postinstall:

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

3. Modify the code in node_modules

4. Execute the command: npx patch-package qiankun.

The first time you use patch-package, you will generate a patches folder in the root directory of the project with the modified file diff record.

When the package version is updated, execute the command: git apply-- ignore-whitespace patches/qiankun+2.0.11.patch. Where qiankun+2.0.11.patch is the file name it generates.

I have published this loader on npm, interested friends can directly call npm install async-catch-loader-D installation and research, use the same as the general loader, remember to put it after the babel-loader for priority execution, and continue to give the injected result to the babel escape

{test: / / .js $/, use: ["babel-loader?cacheDirectory=true", 'async-catch-loader']} so far, I believe you have a better understanding of "how to modify a file in node_modules". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 290

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report