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

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

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

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

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

ps:可以先看看pnpm与monorepo

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

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

然后在scripts文件夹下创建dev.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))

})

然后在根目录的package.json scripts 添加如下

"my-dev": "tsx scripts/dev.ts"

上述脚本主要是为了扫描工作目录下所有有意义的包并执行rollup打包命令（主要也就为了加一下watch没毛病）

终端打开上吗创建的vite项目然后修改package.json里面的vue

 "vue": "workspace:*"

修改后根目录执行pnpm i建立软连接

1.根目录终端执行pnpm run my-dev

2.vite-project执行pnpm run dev

3.去runtime-core/src/apiCreateApp.ts createAppAPI 的 createApp 方法加一句打印

4.等待根目录终端打包完毕

5.去看看浏览器控制台有没有打印

按理说走完上述流出应该有打印出来哈哈 

然后就是想要快点因为我电脑不太行每次修改要等1.5～2s，然后我就想到了turbo，看了官网发现可行就试了试

修改如下

1. pnpm i turbo -wD

2. 修改上述的my-dev "my-dev": "tsx scripts/dev.ts --turbo"
3. 启动并验证