源码学习目录

1. 前言

1.1 学习内容

本文涉及vue-next/scripts/release.js文件,

1.2 环境

  1. 操作系统: macOS 12.0.1
  2. 浏览器: Chrome 94.0.4606.81
  3. shell: zsh
  4. node 16.13.0
  5. vue 3.2.21

  6. rollup 2.38.5

    1.3 get知识点

  7. 熟悉 vuejs 发布流程

  8. 学会调试 nodejs 代码
  9. 动手优化公司项目发布流程

    1.4 发布流程

    第三期 | vue 3.2 是怎么发布的 release - 图1

    2 环境准备

    打开项目,可以通过README.md和CHANGELOG.md看到项目相关信息

    2.1 严格校验使用yarn安装依赖

    看看package.json文件
    1. "preinstall": "node ./scripts/preinstall.js"
    这个是包安装时的前置钩子,在安装包之前会去运行该脚本 ``javascript // 判断文件是不是存在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) }
  1. vue-next 3.2.4的版本判断的包工具是yarn,现在切换到了pnpm,node版本也切换到了16<br />其他相关[npm钩子](https://docs.npmjs.com/cli/v6/using-npm/scripts)
  3. <a name="lLi8y"></a>
  4. ## 2.2 调试 vue-next/scripts/release.js 文件
  5. package.json文件,在脚本的后面加上了--dry,
  6. ```javascript
  7. // --dry 不执行测试和编译 、不执行 推送git等操作
  8. // 只是打印，后文再详细讲述
  9. "release": "node scripts/release.js --dry"

vscode点击dubug就可以开始调试了,命令行会出现debugger attached字段,左侧call Stack会出现node进程和release.js文件,这就开启了正常的调试
image.png

3 开始

3.1 release.js引入的包

通过调试,运行命令 node scripts/release.js --dry

  1. // minimist获取命令行参数
  2. const args = require('minimist')(process.argv.slice(2)) // {_: Array(0), dry: true}
  3. // process.argv.slice(2)截取从下标2开始的数组,因为前面两个值是node的绝对路径和release.js文件的绝对路径,影响运行
  5. const fs = require('fs')
  6. const path = require('path')
  7. // 命令行console添加颜色
  8. const chalk = require('chalk')
  9. // 版本管理
  10. const semver = require('semver')
  11. // 获取当前版本
  12. const currentVersion = require('../package.json').version
  13. // 交互式询问 CLI, prompt异步函数
  14. const { prompt } = require('enquirer')
  16. // 执行脚本
  17. const execa = require('execa')

3.1.1 minimist 获取命令行参数

npm包 minimist

  1. // 使用说明
  2. $ node example/parse.js -x 3 -y 4 -n5 -abc --beep=boop foo bar baz
  3. { _: [ 'foo', 'bar', 'baz' ],
  4.   x: 3,
  5.   y: 4,
  6.   n: 5,
  7.   a: true,
  8.   b: true,
  9.   c: true,
  10.   beep: 'boop' }

目前包已经两年没发新版本了,40+issue

3.1.2 chalk命令行log添加颜色

chalk

  1. chalk.red('Hello', chalk.underline.bgBlue('world') + '!')

3.1.3 semver 包的版本管理

semver

  1. const semver = require('semver')
  3. semver.valid('1.2.3') // '1.2.3'
  4. semver.valid('a.b.c') // null
  5. semver.clean('  =v1.2.3   ') // '1.2.3'
  6. semver.satisfies('1.2.3', '1.x || >=2.5.0 || 5.0.0 - 7.2.3') // true
  7. semver.gt('1.2.3', '9.8.7') // false
  8. semver.lt('1.2.3', '9.8.7') // true
  9. semver.minVersion('>=1.0.0') // '1.0.0'
  10. semver.valid(semver.coerce('v2')) // '2.0.0'
  11. semver.valid(semver.coerce('42.6.7.9.3-alpha')) // '42.6.7'

3.1.4 enquirer 交互式询问 CLI

enquirer

  1. // 支持选择,输入,确定等cli交互,非常方便
  2. const { prompt } = require('enquirer')
  3. const response = await prompt([
  4.   {
  5.     type: 'input',
  6.     name: 'name',
  7.     message: 'What is your name?'
  8.   },
  9.   {
  10.     type: 'input',
  11.     name: 'username',
  12.     message: 'What is your username?'
  13.   }
  14. ]);
  16. console.log(response); // { name: 'Edward Chan', username: 'edwardmchan' }

3.1.5 execa 执行命令

execa

  1. import {execa} from 'execa';
  3. const {stdout} = await execa('echo', ['unicorns']);
  4. console.log(stdout);
  5. //=> 'unicorns'

3.2 release.js前置配置参数和方法

  1. // 上一次预发布变量,自定义参数,或者package.version的版本,例如 3.22.4-beta => beta,没有返回null
  2. const preId =
  3.   args.preid ||
  4.   (semver.prerelease(currentVersion) && semver.prerelease(currentVersion)[0])
  5. // 干运行,不真正很执行代码
  6. const isDryRun = args.dry
  7. // 跳过测试
  8. const skipTests = args.skipTests
  9. // 跳过打包
  10. const skipBuild = args.skipBuild
  11. // 拿到packages下面的文件夹,过滤非ts
  12. const packages = fs
  13.   .readdirSync(path.resolve(__dirname, '../packages'))
  14.   .filter(p => !p.endsWith('.ts') && !p.startsWith('.'))
  16. // 跳过packages
  17. const skippedPackages = []
  19. // 版本递增
  20. const versionIncrements = [
  21.      // 补丁
  22.   'patch',
  23.   // 小版本
  24.   'minor',
  25.   // 重大版本
  26.   'major',
  27.   // 如果是预发布环境,增加预发布的版本
  28.   ...(preId ? ['prepatch', 'preminor', 'premajor', 'prerelease'] : [])
  29. ]
  31. // 生成递增版本, (当前版本,版本key(patch等),'beta')
  32. const inc = i => semver.inc(currentVersion, i, preId)
  33. // 获取node_modules/.bin下面的脚本
  34. const bin = name => path.resolve(__dirname, '../node_modules/.bin/' + name)
  35. // 执行bin脚本
  36. const run = (bin, args, opts = {}) =>
  37.   execa(bin, args, { stdio: 'inherit', ...opts })
  38. // 空运行,只打印
  39. const dryRun = (bin, args, opts = {}) =>
  40.   console.log(chalk.blue(`[dryrun] ${bin} ${args.join(' ')}`), opts)
  41. // 相当于包装了一层run,判断执行哪个run函数,空运行还是真实运行
  42. const runIfNotDry = isDryRun ? dryRun : run
  43. // 获取packages跟路径
  44. const getPkgRoot = pkg => path.resolve(__dirname, '../packages/' + pkg)
  45. // 打印下一步
  46. const step = msg => console.log(chalk.cyan(msg))

3.3 main()函数

3.3.1 主流程

  1. // 发布前运行测试
  2. // run tests before release
  3. step('\nRunning tests...')
  5. // 更新所有包的依赖版本
  6. // update all package versions and inter-dependencies
  7. step('\nUpdating cross dependencies...')
  9. // 打包所有包的类型
  10. // build all packages with types
  11. step('\nBuilding all packages...')
  13. // 输出测试文件
  14. // test generated dts files
  15. step('\nVerifying type declarations...')
  17. // 生成变更日志
  18. // generate changelog
  19. step('\nGenerating changelog...')
  21. // 更新pnpm锁
  22. // update pnpm-lock.yaml
  23. step('\nUpdating lockfile...')
  25. // 如果有git diff, 
  26. const { stdout } = await run('git', ['diff'], { stdio: 'pipe' })
  27. if (stdout)
  28. step('\nCommitting changes...')
  30. // 发布包
  31. // publish packages
  32. step('\nPublishing packages...')
  34. // 推送GitHub
  35. // push to GitHub
  36. step('\nPushing to GitHub...')

3.3.2 获取targetVersion并校验

  1.  let targetVersion = args._[0]
  3. // 不存在当前版本
  4.  if (!targetVersion) {
  5.    // no explicit version, offer suggestions
  6.    const { release } = await prompt({
  7.      type: 'select',
  8.      name: 'release',
  9.      message: 'Select release type',
  10.      // 生成选项,对于不同的版本
  11.      choices: versionIncrements.map(i => `${i} (${inc(i)})`).concat(['custom'])
  12.    })
  13.     // 如果选择自定义版本,手动输入
  14.    if (release === 'custom') {
  15.      targetVersion = (
  16.        await prompt({
  17.          type: 'input',
  18.          name: 'version',
  19.          message: 'Input custom version',
  20.          initial: currentVersion
  21.        })
  22.      ).version
  23.    } else {
  24.      // 如果是选择非自定  patch (3.2.2),获取匹配中()的内容
  25.      targetVersion = release.match(/\((.*)\)/)[1]
  26.    }
  27.  }
  29. if (!semver.valid(targetVersion)) {
  30.     throw new Error(`invalid target version: ${targetVersion}`)
  31. }
  33. // 是否确定要发布
  34. const { yes } = await prompt({
  35.   type: 'confirm',
  36.   name: 'yes',
  37.   message: `Releasing v${targetVersion}. Confirm?`
  38. })
  40. if (!yes) {
  41.   return
  42. }

3.3.3 jest 是否运行测试用例

  1.  if (!skipTests && !isDryRun) {
  2.    // 执行.bin/jest,第二个是参数清除缓存
  3.     await run(bin('jest'), ['--clearCache'])
  4.    // 运行 pnpm test
  5.     await run('pnpm', ['test', '--', '--bail'])
  6.   } else {
  7.     console.log(`(skipped)`)
  8.   }

3.3.4 updateVersions 更新所有包的开发依赖

主要更新vue和@vue/开头的版本
image.png

  1. // 所有的版本保持一致性,无论是否变更
  2. function updateVersions(version) {
  3.   // 1. update root package.json 更新跟目录的package.json
  4.   updatePackage(path.resolve(__dirname, '..'), version)
  5.   // 2. update all packages 更新packages下面的包
  6.   packages.forEach(p => updatePackage(getPkgRoot(p), version))
  7. }
  9. function updatePackage(pkgRoot, version) {
  10.   // 解析包下面的package.json文件
  11.   const pkgPath = path.resolve(pkgRoot, 'package.json')
  12.   // 解析JSON
  13.   const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
  14.   pkg.version = version
  15.   // 更新dependencies
  16.   updateDeps(pkg, 'dependencies', version)
  17.   // 更新peerDependencies
  18.   updateDeps(pkg, 'peerDependencies', version)
  19.   // 将新的pkg写入到package.json文件中
  20.   fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n')
  21. }
  23. // 'dependencies', 'peerDependencies'
  24. function updateDeps(pkg, depType, version) {
  25.   // 获取deps对象
  26.   const deps = pkg[depType]
  27.   // 不存在就返回
  28.   if (!deps) return
  29.   Object.keys(deps).forEach(dep => {
  30.     if (
  31.       dep === 'vue' ||
  32.       (dep.startsWith('@vue') && packages.includes(dep.replace(/^@vue\//, '')))
  33.     ) {
  34.       console.log(
  35.         chalk.yellow(`${pkg.name} -> ${depType} -> ${dep}@${version}`)
  36.       )
  37.       deps[dep] = version
  38.     }
  39.   })
  40. }

peerDependencies的作用:

peerDependencies的目的是提示宿主环境去安装满足插件peerDependencies所指定依赖的包，然后在插件import或者require所依赖的包的时候，永远都是引用宿主环境统一安装的npm包，最终解决插件与所依赖包不一致的问题。

当你写的包a里面依赖另一个包b，而这个包b是引用这个包a的业务的常用的包的时候，建议写在peerDependencies里，避免重复下载/多个版本共存

3.3.5 build打包所有packages

  1.   if (!skipBuild && !isDryRun) {
  2.     // 运行pnpm run build --release
  3.     await run('pnpm', ['run', 'build', '--', '--release'])
  4.     // test generated dts files
  5.     step('\nVerifying type declarations...')
  6.     // pnpm run test-dts-only
  7.     await run('pnpm', ['run', 'test-dts-only'])
  8.   } else {
  9.     console.log(`(skipped)`)
  10.   }

3.3.6 生成CHANGELOG

  1. await run(`pnpm`, ['run', 'changelog'])
  3. // shell
  4. conventional-changelog -p angular -i CHANGELOG.md -s

使用了这个包 conventional-changelog-cli,会生成CHANGELOG.md,里面都是commit信息

3.3.7 install 升级pnpm的lock

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

安装包的锁,pnpm 默认支持workspace,这里的包管理模式采用的是monorepo,整体一个仓库,所以直接在根目录installl就可以了
—prefer-offline: 表示优先使用离线下载,主要目的,只是为了升级packages的lock记录

3.3.8 commit提交代码

  1. // 运行git diff
  2. const { stdout } = await run('git', ['diff'], { stdio: 'pipe' })
  3. // 有值,运行git add,git commit
  4. if (stdout) {
  5.   step('\nCommitting changes...')
  6.   // 如果没有dry直接运行,这个函数在上面3.2有讲到
  7.   await runIfNotDry('git', ['add', '-A'])
  8.   await runIfNotDry('git', ['commit', '-m', `release: v${targetVersion}`])
  9. } else {
  10.   console.log('No changes to commit.')
  11. }

3.3.9 publishPackage发布包

  1. // packages是目录数组
  2. for (const pkg of packages) {
  3.     await publishPackage(pkg, targetVersion, runIfNotDry)
  4.   }
  6. // 包名, 版本, runIfNotDry函数
  7. async function publishPackage(pkgName, version, runIfNotDry) {
  8.   // 跳过的包列表,目前是空的,可能为了以后不再
  9.   if (skippedPackages.includes(pkgName)) {
  10.     return
  11.   }
  12.   // 获取包路径
  13.   const pkgRoot = getPkgRoot(pkgName)
  14.   // 解析包的package.json
  15.   const pkgPath = path.resolve(pkgRoot, 'package.json')
  16.   // JSON转对象
  17.   const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
  18.   // 私有包不需要发布,目前有4个包runtime-test,sfc-playground,size-check,template-explorer
  19.   if (pkg.private) {
  20.     return
  21.   }
  23.   // For now, all 3.x packages except "vue" can be published as
  24.   // `latest`, whereas "vue" will be published under the "next" tag.
  25.   // 版本的tag
  26.   let releaseTag = null
  27.   if (args.tag) {
  28.     releaseTag = args.tag
  29.   } else if (version.includes('alpha')) {
  30.     releaseTag = 'alpha'
  31.   } else if (version.includes('beta')) {
  32.     releaseTag = 'beta'
  33.   } else if (version.includes('rc')) {
  34.     releaseTag = 'rc'
  35.     // 针对vue包,tag是next,目前还不是稳定版,当3.x变成default时,会删除next
  36.   } else if (pkgName === 'vue') {
  37.     // TODO remove when 3.x becomes default
  38.     releaseTag = 'next'
  39.   }
  41.   // TODO use inferred release channel after official 3.0 release
  42.   // const releaseTag = semver.prerelease(version)[0] || null
  44.   step(`Publishing ${pkgName}...`)
  45.   try {
  46.     await runIfNotDry(
  47.       // note: use of yarn is intentional here as we rely on its publishing
  48.       // behavior.
  49.       'yarn',
  50.       [
  51.         'publish',
  52.         '--new-version',
  53.         version,
  54.         ...(releaseTag ? ['--tag', releaseTag] : []),
  55.         '--access',
  56.         'public'
  57.       ],
  58.       {
  59.         cwd: pkgRoot,
  60.         stdio: 'pipe'
  61.       }
  62.     )
  63.     console.log(chalk.green(`Successfully published ${pkgName}@${version}`))
  64.   } catch (e) {
  65.     if (e.stderr.match(/previously published/)) {
  66.       console.log(chalk.red(`Skipping already published: ${pkgName}`))
  67.     } else {
  68.       throw e
  69.     }
  70.   }
  71. }
  1. else if (pkgName === 'vue') {
  2.   // TODO remove when 3.x becomes default
  3.   releaseTag = 'next'
  4. }

上面的代码说明了为什么安装vue3.0还是使用的vue@next,发布到npm还是用的next这个tag

3.3.10 发布到github

  1. // 打tag
  2. await runIfNotDry('git', ['tag', `v${targetVersion}`])
  3. // 提交tag到远端
  4. await runIfNotDry('git', ['push', 'origin', `refs/tags/v${targetVersion}`])
  5. // 提交commit到远端
  6. await runIfNotDry('git', ['push'])

3.3.11 结尾部分

  1. // 如果是空运行,打印空运行的结尾
  2. if (isDryRun) {
  3.   console.log(`\nDry run finished - run git diff to see package changes.`)
  4. }
  5. // 如果有过滤的包,打印出来
  6. if (skippedPackages.length) {
  7.   console.log(
  8.     chalk.yellow(
  9.       `The following packages are skipped and NOT published:\n- ${skippedPackages.join(
  10.         '\n- '
  11.       )}`
  12.     )
  13.   )
  14. }

4 总结

vue-next的构建代码,完全可以用在公司项目中,避免了多项目的发版问题,不过感觉只适合monorepo模式,不太适合multirepo.可以研究一下.
monorepo和multirepo的区别,一个是单仓库,一个是多仓库,两者都是管理组织代码的方式

参考

  1. Vue 3.2 发布了，那尤雨溪是怎么发布 Vue.js 的？
  2. REPO 风格之争：MONO VS MULTI