Vue - Change node_modules source code 🥩

Zhaojjjjjj

April 02, 2024

当node_modules中的默认配置不满足当前项目需求时，需要对node_modules中的源码进行修改。如果直接对源码进行修改，代码不会同步到仓库中，当其他人拉取代码进行开发时，或执行了npm i 后源码依旧是默认配置。

跟目录下新建一个scripts文件夹
在新建的scripts建一个代替node_modules的文件夹，如 new_node_modules
把node_modules中要修改的插件代码复制一份，粘贴到new_node_modules文件夹里，注意目录结构必须一致

如果node_modules目录为
new_node_modules应对应

在scripts文件夹中再建一个change-modules.js文件

const fs = require('fs')
const path = require('path')

// 解决 node_modules 修改源码，导致重新装包而要手动替换源码的重复操作。
// 将 scripts/new_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)
  }
}

修改package.json，在package.json中添加执行change_modules.js的语法，使得项目运行前执行change_modules.js替换相应文件

"scripts": {
        "dev": "node ./scripts/change-modules && vite serve --mode development",
        "build": "node ./scripts/change-modules && vite build && rm -rf ../../../hy/hy_yii/web/dist && mv dist ../../../hy/hy_yii/web/",
        "preview": "node ./scripts/change-modules && vite preview",
        "generate:version": "node ./scripts/change-modules && generate-version-file dist public"
    }

Vue - Change node_modules source code 🥩

Comments