怎么修改node_modules里的文件

本篇內(nèi)容主要講解“怎么修改node_modules里的文件”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么修改node_modules里的文件”吧!

webpack alias 的作用

webpack alias一般用來(lái)配置路徑別名，使我們可以少寫(xiě)路徑代碼：

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

也就是說(shuō)，webpack alias會(huì)替換我們寫(xiě)的“簡(jiǎn)寫(xiě)路徑”，并且它對(duì)node_modules里面的文件也是生效的。這時(shí)候我們可以將別人源碼里面引用模塊的路徑替換成我們自己的文件。

具體操作如下：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  找到別人源碼里面的需要修改的模塊，復(fù)制代碼到src目錄

3.  修改其中的bug，注意里面引用其他的文件都需要寫(xiě)成絕對(duì)路徑

4.  找到這個(gè)模塊被引入的路徑（我們需要攔截的路徑）

5.  配置webpack alias

實(shí)際操作一下

以qiankun框架的patchers模塊為例：

文件被引用的路徑為：./patchers（我們要攔截的路徑）

文件內(nèi)容為：

復(fù)制內(nèi)容到src/assets/patchers.js，修改其 import 路徑為絕對(duì)路徑，并添加我們的代碼：

配置webpack alias（我用的是vue-cli4，配置文件是vue.config.js）:

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

運(yùn)行代碼，控制臺(tái)打印成功，表明我們已經(jīng)成功覆蓋別人的代碼，而且別人的代碼有更新時(shí)，我們也可以同步更新，只是這個(gè)模塊的代碼使用我們自定義的。打包之后也是可以的。

補(bǔ)充：使用patch-package來(lái)修改

經(jīng)掘友 @Leemagination 指點(diǎn)，使用patch-package來(lái)修改node_modules里面的文件更方便

步驟也很簡(jiǎn)單：

1. 鴻蒙官方戰(zhàn)略合作共建——HarmonyOS技術(shù)社區(qū)

2.  安裝patch-package：npm i patch-package --save-dev

3.  修改package.json，新增命令postinstall: 

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

    3.  修改node_modules里面的代碼

    4.  執(zhí)行命令：npx patch-package qiankun。

第一次使用patch-package會(huì)在項(xiàng)目根目錄生成patches文件夾，里面有修改過(guò)的文件diff記錄。

當(dāng)這個(gè)包版本更新后，執(zhí)行命令：git apply --ignore-whitespace patches/qiankun+2.0.11.patch即可。其中qiankun+2.0.11.patch是它生成的文件名。

關(guān)于這個(gè) loader 我已經(jīng)發(fā)布到 npm 上，有興趣的朋友可以直接調(diào)用 npm install async-catch-loader -D 安裝和研究，使用方法和一般 loader 一樣，記得放在 babel-loader 后面，以便優(yōu)先執(zhí)行，將注入后的結(jié)果繼續(xù)交給 babel 轉(zhuǎn)義

{      test: /\.js$/,      use: [          "babel-loader?cacheDirectory=true",          'async-catch-loader'      ]  }

到此，相信大家對(duì)“怎么修改node_modules里的文件”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！