文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么修改node_modules里的文件

2024-04-02 19:55

关注

本篇内容主要讲解“怎么修改node_modules里的文件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么修改node_modules里的文件”吧!

webpack alias 的作用

webpack alias一般用来配置路径别名,使我们可以少写路径代码:

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

也就是说,webpack alias会替换我们写的“简写路径”,并且它对node_modules里面的文件也是生效的。这时候我们可以将别人源码里面引用模块的路径替换成我们自己的文件。

具体操作如下:

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2.  找到别人源码里面的需要修改的模块,复制代码到src目录

  3.  修改其中的bug,注意里面引用其他的文件都需要写成绝对路径

  4.  找到这个模块被引入的路径(我们需要拦截的路径)

  5.  配置webpack alias

实际操作一下

以qiankun框架的patchers模块为例:

怎么修改node_modules里的文件

文件被引用的路径为:./patchers(我们要拦截的路径)

怎么修改node_modules里的文件

文件内容为:

怎么修改node_modules里的文件

复制内容到src/assets/patchers.js,修改其 import 路径为绝对路径,并添加我们的代码:

怎么修改node_modules里的文件

配置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'))    } };

运行代码,控制台打印成功,表明我们已经成功覆盖别人的代码,而且别人的代码有更新时,我们也可以同步更新,只是这个模块的代码使用我们自定义的。打包之后也是可以的。

怎么修改node_modules里的文件

补充:使用patch-package来修改

经掘友 @Leemagination 指点,使用patch-package来修改node_modules里面的文件更方便

步骤也很简单:

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2.  安装patch-package:npm i patch-package --save-dev

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

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

    3.  修改node_modules里面的代码

    4.  执行命令:npx patch-package qiankun。

第一次使用patch-package会在项目根目录生成patches文件夹,里面有修改过的文件diff记录。

怎么修改node_modules里的文件

当这个包版本更新后,执行命令:git apply --ignore-whitespace patches/qiankun+2.0.11.patch即可。其中qiankun+2.0.11.patch是它生成的文件名。

关于这个 loader 我已经发布到 npm 上,有兴趣的朋友可以直接调用 npm install async-catch-loader -D 安装和研究,使用方法和一般 loader 一样,记得放在 babel-loader 后面,以便优先执行,将注入后的结果继续交给 babel 转义

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

到此,相信大家对“怎么修改node_modules里的文件”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯