Vue 3.2 发布了，那尤雨溪是怎么发布 Vue.js 的？

1. 熟悉 vuejs 发布流程2. 学会调试 nodejs 代码3. 动手优化公司项目发布流程

node -v# v14.16.0# 全局安装 yarn
# 建议克隆我的项目git clone https://github.com/lxchuan12/vue-next-analysis.gitcd vue-next-analysis/vue-next
# 或者克隆官方项目git clone https://github.com/vuejs/vue-next.gitcd vue-next
# 安装 yarnnpm install --global yarn# 安装依赖yarn # install the dependencies of the project# yarn release

// vue-next/package.json{    "private": true,    "version": "3.2.4",    "workspaces": [        "packages/*"    ],    "scripts": {        // --dry 参数是我加的，如果你是调试 代码也建议加        // 不执行测试和编译 、不执行 推送git等操作        // 也就是说空跑，只是打印，后文再详细讲述        "release": "node scripts/release.js --dry",        "preinstall": "node ./scripts/checkYarn.js",    }}

// scripts/checkYarn.jsif (!/yarn\.js$/.test(process.env.npm_execpath || '')) {  console.warn(    '\u001b[33mThis repository requires Yarn 1.x for scripts to work properly.\u001b[39m\n'  )  process.exit(1)}

code -v# 1.59.0

// vue-next/scripts/release.jsconst args = require('minimist')(process.argv.slice(2))// 文件模块const fs = require('fs')// 路径const path = require('path')// 控制台const chalk = require('chalk')const semver = require('semver')const currentVersion = require('../package.json').versionconst { prompt } = require('enquirer')
// 执行子进程命令   简单说 就是在终端命令行执行 命令const execa = require('execa')

$ node example/parse.js -a beep -b boop{ _: [], a: 'beep', b: 'boop' }
$ node example/parse.js -x 3 -y 4 -n5 -abc --beep=boop foo bar baz{ _: [ 'foo', 'bar', 'baz' ],  x: 3,  y: 4,  n: 5,  a: true,  b: true,  c: true,  beep: 'boop' }

const args = require('minimist')(process.argv.slice(2))

// 例子const execa = require('execa');
(async () => {  const {stdout} = await execa('echo', ['unicorns']);  console.log(stdout);  //=> 'unicorns'})();

// vue-next/scripts/release.js
// 对应 yarn run release --preid=beta// betaconst preId =  args.preid ||  (semver.prerelease(currentVersion) && semver.prerelease(currentVersion)[0])// 对应 yarn run release --dry// trueconst isDryRun = args.dry// 对应 yarn run release --skipTests// true 跳过测试const skipTests = args.skipTests// 对应 yarn run release --skipBuild // trueconst skipBuild = args.skipBuild
// 读取 packages 文件夹，过滤掉 不是 .ts文件 结尾 并且不是 . 开头的文件夹const packages = fs  .readdirSync(path.resolve(__dirname, '../packages'))  .filter(p => !p.endsWith('.ts') && !p.startsWith('.'))

// vue-next/scripts/release.js
// 跳过的包const skippedPackages = []
// 版本递增const versionIncrements = [  'patch',  'minor',  'major',  ...(preId ? ['prepatch', 'preminor', 'premajor', 'prerelease'] : [])]
const inc = i => semver.inc(currentVersion, i, preId)

semver.inc('3.2.4', 'prerelease', 'beta')// 3.2.5-beta.0

// vue-next/scripts/release.js
// 获取 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
// 获取包的路径const getPkgRoot = pkg => path.resolve(__dirname, '../packages/' + pkg)
// 控制台输出const step = msg => console.log(chalk.cyan(msg))

bin('jest')

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

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

const chalk = require('chalk')const step = msg => console.log(chalk.cyan(msg))// 前面一堆依赖引入和函数定义等async function main(){  // 版本校验
  // run tests before release  step('\nRunning tests...')  // update all package versions and inter-dependencies  step('\nUpdating cross dependencies...')  // build all packages with types  step('\nBuilding all packages...')
  // generate changelog  step('\nCommitting changes...')
  // publish packages  step('\nPublishing packages...')
  // push to GitHub  step('\nPushing to GitHub...')}
main().catch(err => {  console.error(err)})

// 根据上文 mini 这句代码意思是 yarn run release 3.2.4 // 取到参数 3.2.4let 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}`)}
// 确认要 releaseconst { yes } = await prompt({  type: 'confirm',  name: 'yes',  message: `Releasing v${targetVersion}. Confirm?`})
// false 直接返回if (!yes) {  return}

// run tests before releasestep('\nRunning tests...')if (!skipTests && !isDryRun) {  await run(bin('jest'), ['--clearCache'])  await run('yarn', ['test', '--bail'])} else {  console.log(`(skipped)`)}

// update all package versions and inter-dependenciesstep('\nUpdating cross dependencies...')updateVersions(targetVersion)

function updateVersions(version) {  // 1. update root package.json  updatePackage(path.resolve(__dirname, '..'), version)  // 2. update all packages  packages.forEach(p => updatePackage(getPkgRoot(p), version))}

function updatePackage(pkgRoot, version) {  const pkgPath = path.resolve(pkgRoot, 'package.json')  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))  pkg.version = version  updateDeps(pkg, 'dependencies', version)  updateDeps(pkg, 'peerDependencies', version)  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n')}

1. 自己本身 package.json 的版本号2. packages.json 中 dependencies 中 vue 相关的依赖修改3. packages.json 中 peerDependencies 中 vue 相关的依赖修改

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    }  })}

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

// build all packages with typesstep('\nBuilding all packages...')if (!skipBuild && !isDryRun) {  await run('yarn', ['build', '--release'])  // test generated dts files  step('\nVerifying type declarations...')  await run('yarn', ['test-dts-only'])} else {  console.log(`(skipped)`)}

// generate changelogawait run(`yarn`, ['changelog'])

const { stdout } = await run('git', ['diff'], { stdio: 'pipe' })if (stdout) {  step('\nCommitting changes...')  await runIfNotDry('git', ['add', '-A'])  await runIfNotDry('git', ['commit', '-m', `release: v${targetVersion}`])} else {  console.log('No changes to commit.')}

// publish packagesstep('\nPublishing packages...')for (const pkg of packages) {  await publishPackage(pkg, targetVersion, runIfNotDry)}

} else if (pkgName === 'vue') {  // TODO remove when 3.x becomes default  releaseTag = 'next'}

async function publishPackage(pkgName, version, runIfNotDry) {  // 如果在 跳过包里 则跳过  if (skippedPackages.includes(pkgName)) {    return  }  const pkgRoot = getPkgRoot(pkgName)  const pkgPath = path.resolve(pkgRoot, 'package.json')  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))  if (pkg.private) {    return  }
  // For now, all 3.x packages except "vue" can be published as  // `latest`, whereas "vue" will be published under the "next" tag.  let releaseTag = null  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'  } else if (pkgName === 'vue') {    // TODO remove when 3.x becomes default    releaseTag = 'next'  }
  // TODO use inferred release channel after official 3.0 release  // const releaseTag = semver.prerelease(version)[0] || null
  step(`Publishing ${pkgName}...`)  try {    await runIfNotDry(      '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    }  }}

// push to GitHubstep('\nPushing to GitHub...')// 打 tagawait runIfNotDry('git', ['tag', `v${targetVersion}`])// 推送 tagawait runIfNotDry('git', ['push', 'origin', `refs/tags/v${targetVersion}`])// git push 所有改动到 远程  - githubawait runIfNotDry('git', ['push'])

// yarn run release --dry
// 如果传了这个参数则输出 可以用 git diff 看看更改
// const isDryRun = args.dryif (isDryRun) {  console.log(`\nDry run finished - run git diff to see package changes.`)}
// 如果 跳过的包，则输出以下这些包没有发布。不过代码 `skippedPackages` 里是没有包。// 所以这段代码也不会执行。// 我们习惯写 arr.length !== 0 其实 0 就是 false 。可以不写。if (skippedPackages.length) {  console.log(    chalk.yellow(      `The following packages are skipped and NOT published:\n- ${skippedPackages.join(        '\n- '      )}`    )  )}console.log()

1. 确认要发布的版本2. 执行测试用例3. 更新所有包的版本号和内部 vue 相关依赖版本号    3.1 updatePackage 更新包的版本号    3.2 updateDeps 更新内部 vue 相关依赖的版本号4. 打包编译所有包5. 生成 changelog6. 提交代码7. 发布包8. 推送到 github

1. 熟悉 vuejs 发布流程2. 学会调试 nodejs 代码3. 动手优化公司项目发布流程