【源码学习】第⑩期 | 进阶必备：跟尤大学习优化项目发布流程

• 本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。
• 第3期 | vue 3.2 是怎么发布的 vue-release

前言

    日常开发中，项目发布是关键的一步，那么尤大是如何发布vue.js的呢？牛顿说：如果说我比别人看得更远些,那是因为我站在了巨人的肩上。学习优秀源码的很重要的一个目的就是为了能够站在巨人的肩上使我们在职业道路上看得更远。今天就让咱们一起来从vue3.2源码中学学如何优化项目发布吧！

收获清单

• vue.js发布流程
• 调试node.js源码
• 优化自己项目发布的一些新思路

环境准备

• 学习源码是有套路滴，首先养成开源项目第一步先看使用说明的好习惯，一般都是 README.md 或 contributing.md，然后听作者的话准备好运行环境

• 下载源码

git clone https://github.com/vuejs/core.git
cd core
// 安装 pnpm
npm install --global pnpm
// 安装依赖
pnpm i
// "vue-version": "3.2.39"
// "node-version": "v16.14.2"
// "pnpm-version": "7.7.0"

• 看package.json学学如何严格限制包管理器为pnpm，也可以用 only-allow 限制包管理，具体可看我上一篇文章： 【源码学习】 第⑨期 | 团队成员npm、yarn、pnpm混用？教你一行代码规范包管理器

尝试一下用yarn装包会报错如下：

代码如下：

// 判断当前进程是否用pnpm执行装包操作
if (!/pnpm/.test(process.env.npm_execpath || '')) {

  console.warn(

    `\u001b[33mThis repository requires using pnpm as the package manager ` +

      ` for scripts to work properly.\u001b[39m\n`

  )
 // 若不是，带错误退出当前进程
  process.exit(1)

}

调试js代码

• 调试js代码 方式一

方式二

release.js代码分析

4.1 引入依赖

// 利用minimist获取自定义参数
const args = require('minimist')(process.argv.slice(2))
// eg)
// $ node example/parse.js -a beep -b boop
// { _: [], a: 'beep', b: 'boop' }

// fs模块
const fs = require('fs')
// path模块
const path = require('path')
// 终端字体颜色
const chalk = require('chalk')
// 语义化版本号处理,如1.2.3-alpha.1
const semver = require('semver')
// 当前版本号
const currentVersion = require('../package.json').version
// 终端询问式交互
const { prompt } = require('enquirer')
// 执行子进程命令
const execa = require('execa')

4.2 获取自定义参数和指定文件

// 预发布 node scripts/release.js --preId preId || prerelease('1.2.3-alpha.1') ==> ['alpha', 1]
const preId =

  args.preid ||

  (semver.prerelease(currentVersion) && semver.prerelease(currentVersion)[0])
  
 
const isDryRun = args.dry //不执行 ==>  node scripts/release.js --dry

const skipTests = args.skipTests // 跳过测试 ==>  node scripts/release.js --skipTests 

const skipBuild = args.skipBuild // 跳过构建 ==> node scripts/release.js --skipBuild 

// 读取packages文件夹下的文件 过滤掉ts和以'.'开头的文件
const packages = fs

  .readdirSync(path.resolve(__dirname, '../packages'))

  .filter(p => !p.endsWith('.ts') && !p.startsWith('.'))

4.3 版本相关

// 跳过的文件
const skippedPackages = []
// 版本选项
const versionIncrements = [  'patch',  'minor',  'major',  ...(preId ? ['prepatch', 'preminor', 'premajor', 'prerelease'] : [])

]

4.4 执行命令相关

// 预发行标识符：semver 1.2.3 -i prerelease --preid beta1.2.4-beta.0
const inc = i => semver.inc(currentVersion, i, preId)
// 获取/node_modules/.bin文件夹下的命令
const bin = name => path.resolve(__dirname, '../node_modules/.bin/' + name)

// 执行命令
const run = (bin, args, opts = {}) =>

  execa(bin, args, { stdio: 'inherit', ...opts })
// 不干跑执行命令
const dryRun = (bin, args, opts = {}) =>

  console.log(chalk.blue(`[dryrun] ${bin} ${args.join(' ')}`), opts)
// 若不是自定义打印信息就执行命令
const runIfNotDry = isDryRun ? dryRun : run
/** 干跑不执行命令并打印用git diff 看包变化的提示
if (isDryRun) {

    console.log(`\nDry run finished - run git diff to see package changes.`)

  }
*/
// 获取packages
const getPkgRoot = pkg => path.resolve(__dirname, '../packages/' + pkg)
// 控制台输出
const step = msg => console.log(chalk.cyan(msg))

main函数分析

代码结构预览

...版本选择，省略
// run tests before release 执行测试
  step('\nRunning tests...')
  ...省略代码

  // update all package versions and inter-dependencies 更新包版本和相关依赖

  step('\nUpdating cross dependencies...')

  updateVersions(targetVersion)


  // build all packages with types 构建

  step('\nBuilding all packages...')

  // generate changelog 生成changelog

  step('\nGenerating changelog...')

  await run(`pnpm`, ['run', 'changelog'])

  // update pnpm-lock.yaml 更新pnpm-lock.yaml

  step('\nUpdating lockfile...')

  await run(`pnpm`, ['install', '--prefer-offline'])
  ...省略代码

  // publish packages 发布

  step('\nPublishing packages...')

  for (const pkg of packages) {

    await publishPackage(pkg, targetVersion, runIfNotDry)

  }
  // push to GitHub 提交github

  step('\nPushing to GitHub...')
  ...省略代码

5.1 版本选择

执行结果如图，大体思路就是若用户没指定版本，则询问获取想要构建的版本

// 自定义目标版本
let targetVersion = args._[0]

  if (!targetVersion) {

    // no explicit version, offer suggestions

    const { release } = await prompt({

      type: 'select',

      name: 'release',

      message: 'Select release type',

      choices: versionIncrements.map(i => `${i} (${inc(i)})`).concat(['custom'])

    })

    if (release === 'custom') {

      targetVersion = (

        await prompt({

          type: 'input',

          name: 'version',

          message: 'Input custom version',

          initial: currentVersion

        })

      ).version

    } else {

      targetVersion = release.match(/\((.*)\)/)[1]

    }

  }

  if (!semver.valid(targetVersion)) {

    throw new Error(`invalid target version: ${targetVersion}`)

  }

5.2 发布确认提示

const { yes } = await prompt({

    type: 'confirm',

    name: 'yes',

    message: `Releasing v${targetVersion}. Confirm?`

  })


  if (!yes) {

    return

  }
  ... 继续进程

5.3 执行测试用例

// run tests before release

  step('\nRunning tests...')

  if (!skipTests && !isDryRun) {

    await run(bin('jest'), ['--clearCache'])

    await run('pnpm', ['test', '--bail'])

  } else {

    console.log(`(skipped)`)

  }

5.4 更新相关依赖

// update all package versions and inter-dependencies

  step('\nUpdating cross dependencies...')

  updateVersions(targetVersion)
  

updateVersions函数

function updateVersions(version) {

  // 1. update root package.json

  updatePackage(path.resolve(__dirname, '..'), version)

  // 2. update all packages

  packages.forEach(p => updatePackage(getPkgRoot(p), version))

}

updatePackage函数

function updatePackage(pkgRoot, version) {
  const pkgPath = path.resolve(pkgRoot, 'package.json')
  // 读取文件
  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
  // 1.更新package.json版本
  pkg.version = version
  // 2.更新dependencies
  updateDeps(pkg, 'dependencies', version)
  // 3.更新peerDependencies
  updateDeps(pkg, 'peerDependencies', version)
  // 写入package.json
  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n')

}

执行完 pnpm run release --dry 后再执行 git diff，部分截图如下：

更新vue相关依赖 updateDeps函数

function updateDeps(pkg, depType, version) {

  const deps = pkg[depType]

  if (!deps) return

  Object.keys(deps).forEach(dep => {

    if (

      dep === 'vue' ||

      (dep.startsWith('@vue') && packages.includes(dep.replace(/^@vue\//, '')))

    ) {
     // 打印改变版本变化
      console.log(

        chalk.yellow(`${pkg.name} -> ${depType} -> ${dep}@${version}`)

      )

      deps[dep] = version

    }

  })

}

执行结果如下：

5.5 构建包

// build all packages with types

  step('\nBuilding all packages...')

  if (!skipBuild && !isDryRun) {

    await run('pnpm', ['run', 'build', '--release'])

    // test generated dts files

    step('\nVerifying type declarations...')

    await run('pnpm', ['run', 'test-dts-only'])

  } else {

    console.log(`(skipped)`)

  }

5.6 执行命令生成changelog、更新pnpm-lock.yaml

这里使用 conventional-changelog-cli 生成提交日志

// generate changelog

  step('\nGenerating changelog...')

  await run(`pnpm`, ['run', 'changelog'])

  // update pnpm-lock.yaml

  step('\nUpdating lockfile...')

  await run(`pnpm`, ['install', '--prefer-offline'])


  const { stdout } = await run('git', ['diff'], { stdio: 'pipe' })

  if (stdout) {

    step('\nCommitting changes...')
    // git提交更改信息
    await runIfNotDry('git', ['add', '-A'])

    await runIfNotDry('git', ['commit', '-m', `release: v${targetVersion}`])

  } else {

    console.log('No changes to commit.')

  }

5.7 发布包

// publish packages

  step('\nPublishing packages...')

  for (const pkg of packages) {

    await publishPackage(pkg, targetVersion, runIfNotDry)

  }
  
  

发包函数 publishPackage

async function publishPackage(pkgName, version, runIfNotDry) {
  // 跳过指定包
  if (skippedPackages.includes(pkgName)) {

    return

  }

  const pkgRoot = getPkgRoot(pkgName)

  const pkgPath = path.resolve(pkgRoot, 'package.json')
 // 读取 package.json
  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
  // 跳过私有包
  if (pkg.private) {

    return

  }

  let releaseTag = null
  // 根据自定义参数或者版本号生成tag
  if (args.tag) {

    releaseTag = args.tag

  } else if (version.includes('alpha')) {

    releaseTag = 'alpha'

  } else if (version.includes('beta')) {

    releaseTag = 'beta'

  } else if (version.includes('rc')) {

    releaseTag = 'rc'

  }

  step(`Publishing ${pkgName}...`)

  try {

    await runIfNotDry(

      // note: use of yarn is intentional here as we rely on its publishing

      // behavior.

      'yarn',

      [

        'publish',

        '--new-version',

        version,

        ...(releaseTag ? ['--tag', releaseTag] : []),

        '--access',

        'public'

      ],

      {

        cwd: pkgRoot,

        stdio: 'pipe'

      }

    )

    console.log(chalk.green(`Successfully published ${pkgName}@${version}`))

  } catch (e) {

    if (e.stderr.match(/previously published/)) {

      console.log(chalk.red(`Skipping already published: ${pkgName}`))

    } else {

      throw e

    }

  }

}

执行结果

5.8 推送到github

// push to GitHub

  step('\nPushing to GitHub...')

  await runIfNotDry('git', ['tag', `v${targetVersion}`])

  await runIfNotDry('git', ['push', 'origin', `refs/tags/v${targetVersion}`])

  await runIfNotDry('git', ['push'])

5.9 特殊情况打印提示

if (isDryRun) {

    console.log(`\nDry run finished - run git diff to see package changes.`)

  }


  if (skippedPackages.length) {

    console.log(

      chalk.yellow(

        `The following packages are skipped and NOT published:\n- ${skippedPackages.join(

          '\n- '

        )}`

      )

    )

  }

  console.log()

如咱们这里执行了pnpm run release --dry就会出现下图：

到这里代码就分析完啦，给看到这里的自己鼓个掌吧~

vue发布流程

1. 选择版本
2. 发布确认提示
3. 执行测试用例
4. 更新自身package.json以及跟vue相关的依赖
5. 构建包
6. 执行命令生成changelog、更新pnpm-lock.yaml
7. 发布包
8. 推送到github

总结

    今天分析调试了vue的发包源码 scripts/release.js ,对 vue 的发布流程有了更进一步的了解，若日常开发中需要优化更新日志可以借鉴尤大的做法。不知不觉已经是学习源码的第10篇文章了，对源码也由最初的恐惧变得亲切😄，每学一次源码都觉得自己掌握的东西过于浅薄，开源项目作者们的思路都很优秀，有很多可以借鉴学习的地方。宁静致远，静下来慢慢分析，其实源码也没有想象中的那么难，而且每分析完一次源码都会增强自己下一次学习的信心，最后将源码中学到的东西应用到自己的实际项目中真的可以提高效率，受益匪浅！