yalc发布本地包全自动化更新

最近在项目中使用npm包，每次都要删除包并且重新npm run dev非常的麻烦，所以在研究中查询本地包的帆布方法，看到了一库老师使用yalc的文章，确实很好用，但是并没有完成全流程的自动化。

以下是发布了本地包之后，重新更新的流程

1.需要关闭原进程，并重新npm run dev

2.在vite.connfig.ts 中重新保存一下(vite中关于预构建的更新)

所以写了方法来处理全自动更新方案

根据yalc的特性，每次发布本地包后，依赖本地保重会产生一个yalc.lock 文件，并且每次yalc.lockd都会更新signature，所以采用监听yalc.lock文本产生变化就重新刷新的方法，编写了一个js脚本。

准备工作

1.在vite.config.ts 中加入（关于vite预构建的机制，否则缓存不会更新）

optimizeDeps: {
      force: true
    }

2.下载监听插件watch

npm i watch

3.添加脚本程序devServer.mjs

import { spawn } from 'node:child_process'
import watch from 'watch'

const includes = ['yalc.lock']

// 启动 Vite 进程的函数
let viteProcess = null

async function killProcessTree(pid) {
  return new Promise((resolve) => {
    // eslint-disable-next-line no-undef
    if (process.platform === 'win32') {
      // Windows 使用 taskkill
      const killer = spawn('taskkill', ['/pid', pid, '/t', '/f'])
      killer.on('close', resolve)
    } else {
      // Unix 使用 pkill
      const killer = spawn('pkill', ['-P', pid])
      killer.on('close', () => {
        // 确保父进程也终止
        try {
          // eslint-disable-next-line no-undef
          process.kill(pid, 'SIGKILL')
        } catch (err) {
          console.log('killProcessTree', err)
        }
        resolve()
      })
    }
  })
}

async function startVite() {
  if (viteProcess) {
    console.log('🔄 终止旧 Vite 进程树...')
    await killProcessTree(viteProcess.pid)
    viteProcess = null
  }

  // 使用 spawn 而不是 exec，以便更好地控制
  viteProcess = spawn('npm', ['run', 'dev'], {
    shell: true, // 兼容 Windows
    stdio: ['pipe', 'pipe', 'pipe'],
  })

  // 实时输出日志
  viteProcess.stdout.on('data', (data) => console.log(data.toString()))
  viteProcess.stderr.on('data', (data) => console.error(data.toString()))

  viteProcess.on('exit', (code, signal) => {
    console.log(`Vite 进程退出，代码: ${code}, 信号: ${signal}`)
  })

  console.log('🚀 启动新 Vite 进程')
}
watch.watchTree(
  './',
  {
    filter: (path) => {
      return includes.includes(path)
    },
  },
  () => {
    startVite()
  },
)

4.在package.json中添加命令

"dev:watch": "node devServer.mjs"

5.运行npm run dev:watch

这样在发布yalc更新本地包的时候就可以自动更新项目了