关于晚上十点和男生朋友打电话调试vue源码那些事

简介

朋友昨晚让我帮忙看怎么调试vue源码，我当时就不困了啊。兴致勃勃搞了半小时以失败告终。小白我可是永不言败的，早上鼓捣了俩小时总算写了点东西出来。想调试vue源码的小伙伴可以试试我这个思路

fork源码

首先肯定是要把vue/core代码fork一份到自己的仓库这样后续有改动可以提交一下也可以从源码一键同步

ps：github.com/baicie/vuej... 我的代码在这里可以参考一下

装包

bash 复制代码

pnpm i @pnpm/find-workspace-packages @pnpm/types -wD

ps:可以先看看pnpm与monorepo

在根目录执行上述命令装一下依赖-wD含义是在workspace的根安装开发依赖

脚本编写

首先在packages下执行pnpm creata vite创建一个vue项目

然后在scripts文件夹下创建dev.ts

ts 复制代码

import type { Project as PnpmProject } from '@pnpm/find-workspace-packages'
import { findWorkspacePackages } from '@pnpm/find-workspace-packages'
import type { ProjectManifest } from '@pnpm/types'
import { execa } from 'execa'
import os from 'node:os'
import path from 'node:path'
import process from 'node:process'
import color from 'picocolors'
import { scanEnums } from './const-enum'

export type Manifest = ProjectManifest & {
  buildOptions: {
    name?: string
    compat?: boolean
    env?: string
    formats: ('global' | 'cjs' | 'esm-bundler' | 'esm-browser')[]
  }
}

interface Project extends PnpmProject {
  manifest: Manifest
}

const pkgsPath = path.resolve(process.cwd(), 'packages')
const getWorkspacePackages = () => findWorkspacePackages(pkgsPath)

async function main() {
  scanEnums()
  // 获取所有的包 除了private与没有buildOptions的包
  const pkgs = (
    (await getWorkspacePackages()).filter(
      item => !item.manifest.private
    ) as Project[]
  ).filter(item => item.manifest.buildOptions)

  await buildAll(pkgs)
}

async function buildAll(target: Project[]) {
  // 并行打包
  return runParallel(Number.MAX_SAFE_INTEGER, target, build)
}

async function runParallel(
  maxConcurrent: number,
  source: Project[],
  buildFn: (project: Project) => void
) {
  const ret: Promise<void>[] = []
  const executing: Promise<void>[] = []
  for (const item of source) {
    const p = Promise.resolve().then(() => buildFn(item))
    // 封装所有打包任务
    ret.push(p)

    //
    if (maxConcurrent <= source.length) {
      const e: any = p.then(() => executing.splice(executing.indexOf(e), 1))
      executing.push(e)
      if (executing.length >= maxConcurrent) await Promise.race(executing)
    }
  }

  return Promise.all(ret)
}

async function build(project: Project) {
  const pkg = project.manifest
  // 获取相对路径 包名
  const target = path.relative(pkgsPath, project.dir)
  if (pkg.private) {
    return
  }

  const env = (pkg.buildOptions && pkg.buildOptions.env) || 'development'
  await execa(
    'rollup',
    [
      `-c`,
      // 给rollup配置文件传递参数 watch 监听文件变化
      '--watch',
      '--environment',
      [`NODE_ENV:${env}`, `TARGET:${target}`, `SOURCE_MAP:true`]
        .filter(Boolean)
        .join(',')
    ],
    { stdio: 'inherit' }
  )
}

main().catch(err => {
  console.error(color.red(err))
})