尤大是如何發布vuejs的，學完可以應用到項目

大家好，我是若川。本文是讀者@NewName 投稿，看了我推薦的vuejs如何發布的源碼（200余行），并成功寫了一個小工具。推薦的當晚看到挺晚，這執行力這努力程度超過很多人啊。我本來是打算自己寫一篇這個文章的，沒想到他寫完了。

前言：第一次看源碼，感謝我川哥提供合適題材，給予細心指導。感覺學習源碼真的很有幫助，我第一次就品嘗到甜頭了，可以借鑒（抄襲）源碼的思想解決實際的問題，真好啊。本人著實菜鳥一枚，也不會寫作，把學習的筆記記錄一下而已。

1. 準備工作和主要精神

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

2.源碼主旨內容：vuejs 是如何發布

3.要思考學完了可以應用的地方：

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

4.讀源碼特別要注意：

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

2. 從main函數開始看

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

先簡單看下 vuejs 發布總體流程

2.1 版本號驗證相關流程：40 - 77行

40行：獲取版本號

44 -49行：如果版本號不存在則問是要升級大版本、小版本、補丁版本還是自定義

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

65-67行：檢查版本號是否合法

69-73行：問是否確定要發布版本

55-77: 如果選擇否 main函數執行結束，返回

2.2 發布之前的測試：80-86行

2.3 更新依賴的版本號：88-90行

2.4 運行build命令：93-101行

2.5 運行日志命令：104行

2.6 提交代碼：106-113行

2.7 運行發布命令：115-119 行

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

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

3. 一些變量和函數的定義細節

3.1 發布之前測試：

80-86行：

//如果沒有skipTests 跳過測試?并且沒有 isDryRun（空跑？）則運行測試
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 構建所有的包

93—101行：

//其實是運行yarn?build?命令?
await?run('yarn',?['build',?'--release'])

3.3 運行日志命令

104行：運行 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版本管理相關

//判斷文件是否有變化，如果有變化則提交到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 運行發布命令

115-119行: 發布

//?publish?packagesstep('\nPublishing?packages...')for?(const?pkg?of?packages)?{await?publishPackage(pkg,?targetVersion,?runIfNotDry)}
//publishPackage的定義在175-230行：
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.//?定義一下發布的標記?(打tag)let?releaseTag?=?nullif?(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?defaultreleaseTag?=?'next'}//?TODO?use?inferred?release?channel?after?official?3.0?release//?const?releaseTag?=?semver.prerelease(version)[0]?||?null//?執行發布：?運行yarn的發布命令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 更新依賴的細節

88-90: 更新所有的依賴

updateVersions(targetVersion)
//updateVersions?是定義的一個更新版本的函數，里面調用了?updatePackage函數
function?updateVersions(version)?{//?1.?update?root?package.jsonupdatePackage(path.resolve(__dirname,?'..'),?version)//?2.?update?all?packagespackages.forEach(p?=>?updatePackage(getPkgRoot(p),?version))
}
//packages的定義在第16行；
//updatePackag在157行：大概意思是找到路徑下的package.json文件然后讀取文件內容，轉成對象，更新版本，再寫回文件。
function?updatePackage(pkgRoot,?version)?{const?pkgPath?=?path.resolve(pkgRoot,?'package.json')const?pkg?=?JSON.parse(fs.readFileSync(pkgPath,?'utf-8'))pkg.version?=?versionupdateDeps(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)?returnObject.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. 總體的流程總結回顧

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

先簡單看下 vuejs 發布總體流程

5. 使用的依賴

5.1 minimist

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

minimist輕量級的命令行參數解析引擎

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

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

5.2 chalk

const?chalk?=?require('chalk')

chalk是一個顏色的插件

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

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

5.3 semver

const?semver?=?require('semver')

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

語義化版本掃盲 ?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是可以調用shell和本地外部程序的javascript封裝。會啟動子進程執行。支持多操作系統，包括windows。如果父進程退出，則生成的全部子進程都被殺死。

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

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

5.6 yarn的相關命令

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

5.7 conventional-changelog

在約定式提交的基礎上來自動生成changelog

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

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

6. 應用：優化發“預發布版本”的流程

6.1 問題描述

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

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

6.2 解決方案

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

（1）要獲取當前年份，當前第幾周：這兩個值用JS基本代碼就ok，

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

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

（4）如果控制臺中要高亮提示信息則使用依賴：chalk ，當然這個是可選的

6.3 具體實現

6.3.1 首先項目根目錄下新建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('歡迎使用發版小助手腳本')step('\n驗證是否提交代碼...')const?{?yes?}?=?await?prompt({type:?'confirm',name:?'yes',message:?`確定已經提交代碼并將代碼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'])//?合并完成后，推送到遠程?release?分支await?run('git',?['push',?'origin',?'release'])//?以下邏輯為拼寫tag號，打tag用//?獲取當前年份后兩位const?yearLastTwoBit?=?getLastTwoBitYear()console.log(yearLastTwoBit)//?獲取當前是一年中的第幾周const?currentWeek?=?theWeek()console.log(currentWeek)//?本次的版本號const?targetVersion?=?(await?prompt({type:?'input',name:?'version',message:?'這次是本周第幾次發版？（請輸入數字）',})).versionconsole.log(targetVersion)//?前端服務名字const?serviceName?=?(await?prompt({type:?'input',name:?'serviceName',message:?'請輸入這個前端服務名字？（例如 fe_beg）',})).serviceNameconsole.log(serviceName)//?拼接tag名?const?tagName?=?`Cloud_R-12.${yearLastTwoBit}.${currentWeek}.${targetVersion?>?10???targetVersion?:?`0${targetVersion}`}-${serviceName}`//?拼接注釋const?comment?=?`${serviceName}服務${currentWeek}周/迭代第${targetVersion}次版本發布`//?本地打?Tag，生成版本await?run('git',?['tag',?tagName,?'-m',?comment])//?推送?Tag?到遠程代碼庫，觸發構建await?run('git',?['push',?'--tags'])console.log('稍等片刻，即可完成預發布環境版本發布，詳細查看Jenkins')//?重新切換到develop分支await?run('git',?['checkout',?'develop'])
}//?獲取當前年份后兩位
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;//判斷是否為閏年，針對2月的天數進行計算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)
})