人類高質(zhì)量前端男性遇到「發(fā)包」的時(shí)候是怎么做的？

1. 準(zhǔn)備工作和主要精神

1.源碼地址：https://github1s.com/vuejs/vue-next/blob/HEAD/scripts/release.js

2.源碼主旨內(nèi)容：vuejs 是如何發(fā)布

3.要思考學(xué)完了可以應(yīng)用的地方：

1.比如學(xué)完這個(gè)源碼，優(yōu)化自己項(xiàng)目的發(fā)布流程 
————真有點(diǎn)想法耶：
我們公司目前的前端發(fā)版本流程中有許多的git命令 ，這些git命令我可以用腳本的方式運(yùn)行，借鑒源碼中的run方法：
const run = (bin, args, opts = {}) =>
  execa(bin, args, { stdio: 'inherit', ...opts })
目前已經(jīng)寫了（CV）一個(gè)工具腳本，優(yōu)化了我們公司前端項(xiàng)目發(fā)預(yù)發(fā)布版本的流程，詳見第六部分。

4.讀源碼特別要注意：

先看懂大局呀～ 主線是main函數(shù)  先看懂大概 然后不懂的再查

2. 從main函數(shù)開始看

將 main 函數(shù)中主要代碼梳理一下，總體流程如下圖所示：

2.1 版本號(hào)驗(yàn)證相關(guān)流程 ：40 - 77行

40行：獲取版本號(hào)

44 -49行 ：如果版本號(hào)不存在則問是要升級(jí)大版本、小版本、 補(bǔ)丁版本 還是自定義

52-59 行 ：如果用戶選擇的自定義則獲取自定義的版本

65-67行：檢查版本號(hào)是否合法

69-73行：?jiǎn)柺欠翊_定要發(fā)布版本

55-77: 如果選擇否 main函數(shù)執(zhí)行結(jié)束， 返回

2.2 發(fā)布之前的測(cè)試：80-86行

2.3 更新依賴的版本號(hào)：88-90行

2.4 運(yùn)行build命令 ：93-101行

2.5 運(yùn)行日志命令 ：104行

2.6 提交代碼：106-113行

2.7 運(yùn)行發(fā)布命令 ：115-119 行

2.8 新的版本push到git：121-125行

2.9 提示跳過更新的包：131-139行

3. 一些變量和函數(shù)的定義細(xì)節(jié)

3.1 發(fā)布之前測(cè)試：

80-86行：

//如果沒有skipTests 跳過測(cè)試 并且沒有 isDryRun（空跑？）則運(yùn)行測(cè)試
step('\nRunning tests...')
    if (!skipTests && !isDryRun) {
    //使用jest , 清除緩存
    await run(bin('jest'), ['--clearCache'])
    //yarn test 
    await run('yarn', ['test', '--bail'])
    } else {
    console.log(`(skipped)`)
 }

3.2 構(gòu)建所有的包

93—101行：

//其實(shí)是運(yùn)行yarn build 命令 
await run('yarn', ['build', '--release'])

3.3 運(yùn)行日志命令

104行：運(yùn)行 yarn 的log命令

await run(`yarn`, ['changelog'])
//changelog定義在package.json 的 npm scripts 中：
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
 //這里使用到了conventional-changelog,見第五部分：使用的依賴

3.4 提交代碼

106-113行：git版本管理相關(guān)

//判斷文件是否有變化，如果有變化則提交到git
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.')
  }

3.5 運(yùn)行發(fā)布命令

115-119行: 發(fā)布

// publish packages
  step('\nPublishing packages...')
  for (const pkg of packages) {
    await publishPackage(pkg, targetVersion, runIfNotDry)
  }
//publishPackage的定義在175-230行：
async function publishPackage(pkgName, version, runIfNotDry) {
  // 如果某個(gè)包要跳過則直接返回
  if (skippedPackages.includes(pkgName)) {
    return
  }
  //獲取路徑和內(nèi)容
  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.
  // 定義一下發(fā)布的標(biāo)記 (打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
  // 執(zhí)行發(fā)布： 運(yùn)行yarn的發(fā)布命令
  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
    }
  }
}

3.6 更新依賴的細(xì)節(jié)

88-90: 更新所有的依賴

updateVersions(targetVersion)
//updateVersions 是定義的一個(gè)更新版本的函數(shù)，里面調(diào)用了 updatePackage函數(shù)
function updateVersions(version) {
  // 1. update root package.json
  updatePackage(path.resolve(__dirname, '..'), version)
  // 2. update all packages
  packages.forEach(p => updatePackage(getPkgRoot(p), version))
}
//packages的定義在第16行；
//updatePackag在157行：大概意思是找到路徑下的package.json文件然后讀取文件內(nèi)容，轉(zhuǎn)成對(duì)象，更新版本，再寫回文件。
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')
}
//這里用到的updateDeps在 159-173行定義：
function updateDeps(pkg, depType, version) {
  const deps = pkg[depType]
  if (!deps) return
  Object.keys(deps).forEach(dep => {
    //大概含義是檢查依賴，如果其中有vue則提示并且替換版本。
    if (
      dep === 'vue' ||
      (dep.startsWith('@vue') && packages.includes(dep.replace(/^@vue\//, '')))
    ) {
      console.log(
        chalk.yellow(`${pkg.name} -> ${depType} -> ${dep}@${version}`)
      )
      deps[dep] = version
    }
  })
}

4. 總體的流程總結(jié)回顧

將 main 函數(shù)中主要代碼梳理一下，總體流程如下圖所示：

5. 使用的依賴

5.1 minimist

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

minimist輕量級(jí)的命令行參數(shù)解析引擎

https://blog.csdn.net/fangxuan1509/article/details/107469465

https://www.npmjs.com/package/minimist

5.2 chalk

const chalk = require('chalk')

chalk是一個(gè)顏色的插件

https://blog.csdn.net/sqrtsix/article/details/76615630

https://www.npmjs.com/package/chalk

5.3 semver

const semver = require('semver')

Semver是一個(gè)專門分析Semantic Version（語義化版本）的工具，“semver”其實(shí)就是這兩個(gè)單詞的縮寫。Npm使用了該工具來處理版本相關(guān)的工作。

語義化版本掃盲  https://segmentfault.com/a/1190000014405355

https://www.npmjs.cn/misc/semver/

5.4 enquirer

const { prompt } = require('enquirer')

命令行提示的？

https://www.npmjs.com/package/enquirer

5.5 execa

const execa = require('execa')

execa是可以調(diào)用shell和本地外部程序的javascript封裝。會(huì)啟動(dòng)子進(jìn)程執(zhí)行。支持多操作系統(tǒng)，包括windows。如果父進(jìn)程退出，則生成的全部子進(jìn)程都被殺死。

http://abloz.com/tech/2018/08/21/nodejs-execa/

https://www.npmjs.com/package/execa

5.6 yarn的相關(guān)命令

https://yarn.bootcss.com/docs/getting-started/

5.7 conventional-changelog

在約定式提交的基礎(chǔ)上來自動(dòng)生成changelog

https://blog.csdn.net/weixin_34326179/article/details/91382865

https://www.npmjs.com/package/conventional-changelog

6. 應(yīng)用：優(yōu)化發(fā)“預(yù)發(fā)布版本”的流程

6.1 問題描述

“預(yù)發(fā)布版本”是我們發(fā)正式版本之前的一個(gè)驗(yàn)證版本，目前我們公司前端項(xiàng)目發(fā)“預(yù)發(fā)布版本”的時(shí)候要通過如下圖所示的流程，這里面有很多操作git的命令，受閱讀源碼啟發(fā)，我想寫一個(gè)工具腳本，把這些命令變成自動(dòng)執(zhí)行的方式，需要的信息只需要開發(fā)者輸入或者選擇即可。

其中生成tag的時(shí)候需要根據(jù)tag命名規(guī)范來生成。下圖中 12 為固定值 ，20代表年份，30代表是一年中的第幾周，01代表第幾次發(fā)版。

6.2 解決方案

所以我需要寫的腳本中就需要做這幾件事情：

（1）要獲取當(dāng)前年份，當(dāng)前第幾周：這兩個(gè)值用JS基本代碼就ok，

（2）需要和開發(fā)者交互獲取第幾次發(fā)版和服務(wù)名：可以使用 release.js 中使用的 依賴：enquirer；

（3）需要運(yùn)行g(shù)it命令：release.js 中使用的 依賴：execa，以及定義的 run()方法。

（4）如果控制臺(tái)中要高亮提示信息則使用依賴：chalk ，當(dāng)然這個(gè)是可選的

6.3 具體實(shí)現(xiàn)

6.3.1 首先項(xiàng)目根目錄下新建scripts文件夾，然后新建 release.js文件

6.3.2 安裝依賴

npm install chalk --save-dev 
npm install execa --save-dev 
npm install enquirer --save-dev 

6.3.3 寫代碼

const chalk = require('chalk')
const execa = require('execa')
const {
  prompt
} = require('enquirer')

const step = msg => console.log(chalk.cyan(msg))

const run = (bin, args, opts = {}) =>
  execa(bin, args, {
    stdio: 'inherit',
    ...opts
  })


async function main() {
  console.log('歡迎使用發(fā)版小助手腳本')
  step('\n驗(yàn)證是否提交代碼...')
  const { yes } = await prompt({
    type: 'confirm',
    name: 'yes',
    message: `確定已經(jīng)提交代碼并將代碼push到develop分支了嗎?`
  })

  if (!yes) {
    return
  }
  // 切換到 develop 分支，拉取最新代碼
  await run('git', ['checkout', 'develop'])
  await run('git', ['pull', 'origin', 'develop'])
  // 切換到 release 分支，拉取最新代碼
  await run('git', ['checkout', 'release'])
  await run('git', ['pull', 'origin', 'release'])
  // 本地 release 分支合并 develop 分支代碼
  await run('git', ['merge', 'develop'])
  // 合并完成后，推送到遠(yuǎn)程 release 分支
  await run('git', ['push', 'origin', 'release'])
  
  // 以下邏輯為拼寫tag號(hào)，打tag用
 
  // 獲取當(dāng)前年份后兩位
  const yearLastTwoBit = getLastTwoBitYear()
  console.log(yearLastTwoBit)

  // 獲取當(dāng)前是一年中的第幾周
  const currentWeek = theWeek()
  console.log(currentWeek)

  // 本次的版本號(hào)
  const targetVersion = (
    await prompt({
      type: 'input',
      name: 'version',
      message: '這次是本周第幾次發(fā)版？（請(qǐng)輸入數(shù)字）',
    })
  ).version
  console.log(targetVersion)

  // 前端服務(wù)名字
  const serviceName = (
    await prompt({
      type: 'input',
      name: 'serviceName',
      message: '請(qǐng)輸入這個(gè)前端服務(wù)名字？（例如 fe_beg）',
    })
  ).serviceName
  console.log(serviceName)

  // 拼接tag名 
  const tagName = `Cloud_R-12.${yearLastTwoBit}.${currentWeek}.${targetVersion > 10 ? targetVersion : `0${targetVersion}`}-${serviceName}`

  // 拼接注釋
  const comment = `${serviceName}服務(wù)${currentWeek}周/迭代第${targetVersion}次版本發(fā)布`
  
  // 本地打 Tag，生成版本
  await run('git', ['tag', tagName, '-m', comment])

  // 推送 Tag 到遠(yuǎn)程代碼庫，觸發(fā)構(gòu)建
  await run('git', ['push', '--tags'])

  console.log('稍等片刻，即可完成預(yù)發(fā)布環(huán)境版本發(fā)布，詳細(xì)查看Jenkins')

  // 重新切換到develop分支
  await run('git', ['checkout', 'develop'])
}

// 獲取當(dāng)前年份后兩位
function getLastTwoBitYear() {
  const date = new Date()
  const currentYear = date.getFullYear().toString()
  return currentYear.substr(currentYear.length - 2, 2)
}

function theWeek() {
  var totalDays = 0;
  now = new Date();
  var days = new Array(12);
  days[0] = 31;
  days[2] = 31;
  days[3] = 30;
  days[4] = 31;
  days[5] = 30;
  days[6] = 31;
  days[7] = 31;
  days[8] = 30;
  days[9] = 31;
  days[10] = 30;
  days[11] = 31;
  //判斷是否為閏年，針對(duì)2月的天數(shù)進(jìn)行計(jì)算
  if (Math.round(now.getYear() / 4) == now.getYear() / 4) {
    days[1] = 29
  } else {
    days[1] = 28
  }
  if (now.getMonth() == 0) {
    totalDays = totalDays + now.getDate();
  } else {
    var curMonth = now.getMonth();
    for (var count = 1; count <= curMonth; count++) {
      totalDays = totalDays + days[count - 1];
    }
    totalDays = totalDays + now.getDate();
  }
  //得到第幾周
  var week = Math.round(totalDays / 7);
  return week;
}
main().catch(err => {
  console.log(err)
})

6.3.4 然后在package.json 中增加一個(gè)npm script：

"release": "node scripts/release.js",

6.3.5 測(cè)試

運(yùn)行命令：

npm run release  

下圖為腳本運(yùn)行效果：

小工具腳本運(yùn)行還算順利，只需要運(yùn)行1次命令，確認(rèn)1次，輸入2次，避免了輸入很多git命令。還有就是發(fā)完“預(yù)發(fā)布”之后，我們很容易忘了切回develop分支，這個(gè)小工具腳本最后把代碼切到了develop分支，可以減少不必要的麻煩。