node-modules里源码的正确修改方式

**

需求:插件不满足要求,需要修改源码,但是上传代码到git仓库时,我们通常会忽略node_modules文件上传,这样导致另一个同事下载代码时,需要重新npm install,那么下载下来的node_modules文件就是原本的,而不是我们当时修改过的,所以这个时候需要同事也手动修改源码。下面时解决这个问题的方法 具体步骤:

  1. 在跟目录下新建一个scripts文件夹
  2. 在新建的scripts建一个代替node_modules的文件夹,取名最好不要叫node_modules(因为上传代码时同样会被忽略),我这里叫new_node_modules
  3. 把原来node_modules里面的你要修改的插件代码复制一份,粘贴到new_node_modules文件夹里,注意目录结构必须一致 例如:我要修改的是node_modules下面的@fullcalendar下面的common下面的main.js文件
    在这里插入图片描述
    那么我的new_node_modules文件夹的结构就应该是:
    在这里插入图片描述
    总之目录结构保持一致
  4. 在新建的scripts文件夹中再建一个change-modules.js文件,
    代码内容如下:
const fs = require('fs')
const path = require('path')
// 解决 node_modules 修改源码,导致重新装包而要手动替换源码的重复操作。
// 将 scripts/node_modules 内的文件 覆盖 真正的 node_modules
const REAL_NODE_MODULES = path.resolve('./node_modules') // 旧node_modules
const MY_NODE_MODULES = path.resolve('./scripts/new_node_modules') // 新node_modules
copy(MY_NODE_MODULES, REAL_NODE_MODULES)
/**
*复制目录中的所有文件包括子目录
*@param{string}需要复制的目录、文件
*@param{string}复制到指定的目录、文件
*@param{function}每次复制前,都会经过一次filterFn,若返回true,则复制。
*/
function copy (origin, target, filterFn = () => true) {
  if (fs.statSync(origin).isDirectory()) {
    // 来源是个文件夹,那目标也整一个文件夹
    if (!fs.existsSync(target)) {
      fs.mkdirSync(target)
    }
    fs.readdirSync(origin).forEach(originName => {
      const originFilePath = path.resolve(origin, originName)
      const targetFilePath = path.resolve(target, originName)
      copy(originFilePath, targetFilePath, filterFn)
    })
  } else if (filterFn(origin, target)) {
    fs.copyFileSync(origin, target)
  }
}
  1. 在package.json文件添加指令,路径指向你定义的替换方法,如change-modules.js
    在这里插入图片描述
    在所有需要的时候都要加上change_modules这条指令
  2. 重新运行项目,这样项目运行的依赖就是你改过的那份拉,别的同事拉取你的代码之后,再下载,也同样会运行你改过的那份代码。

大功告成

  • 7
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
要查看element-ui中el-date-picker的源码,你可以按照以下步骤进行操作: 1. 首先,你需要复制element-ui中date-picker组件的源码。可以在node_modules\element-ui\packages\date-picker目录中找到该源码文件。 2. 将复制的源码粘贴到你的项目中的合适位置,比如src\components\date-picker。 3. 在你的项目的main.js文件中使用import语句引入DatePicker组件,并将其注册为全局组件。示例代码如下: ``` import DatePicker from './components/date-picker'; Vue.component('DatePicker', DatePicker); ``` 4. 现在你就可以在你的项目中使用el-date-picker组件了。在你的Vue模板中,可以使用以下代码: ``` <DatePicker v-model="value" type="week" format="yyyy 第 WW 周" placeholder="选择周"></DatePicker> ``` 通过以上步骤,你可以将element-ui中的el-date-picker组件的源码复制到你的项目中,并使用它来实现你的需求。如果你想了解更多关于el-date-picker的源码细节,你可以查看src\components\date-picker\src\picker\date-picker.js文件,这个文件中包含了el-date-picker的不同模式的实现逻辑。另外,你也可以修改src\components\date-picker\src\panel\week-range.vue文件来改造el-date-picker实现新的模式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [手撸Element源码,完善日期选择器功能,范围选择器周、季、年](https://blog.csdn.net/qq_45485759/article/details/130970367)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值