當(dāng)前位置：首頁 >

尤大是如何发布vuejs的，学完可以应用到项目

發(fā)布時間：2023/12/9 45 豆豆

生活随笔收集整理的這篇文章主要介紹了尤大是如何发布vuejs的，学完可以应用到项目小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

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

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

4.讀源碼特別要注意：

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

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

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

先簡單看下 vuejs 發(fā)布總體流程

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

40行：獲取版本號

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

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

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

69-73行：問是否確定要發(fā)布版本

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

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

2.3 更新依賴的版本號：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ā)布之前測試：

80-86行：

//如果沒有skipTests 跳過測試?并且沒有 isDryRun（空跑？）則運(yùn)行測試 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?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}//獲取路徑和內(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?=?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//?執(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?是定義的一個更新版本的函數(shù)，里面調(diào)用了?updatePackage函數(shù) 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文件然后讀取文件內(nèi)容，轉(zhuǎn)成對象，更新版本，再寫回文件。 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. 總體的流程總結(jié)回顧

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

先簡單看下 vuejs 發(fā)布總體流程

5. 使用的依賴

5.1 minimist

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

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

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”其實(shí)就是這兩個單詞的縮寫。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封裝。會啟動子進(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ǔ)上來自動生成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ā)正式版本之前的一個驗證版本，目前我們公司前端項目發(fā)“預(yù)發(fā)布版本”的時候要通過如下圖所示的流程，這里面有很多操作git的命令，受閱讀源碼啟發(fā)，我想寫一個工具腳本，把這些命令變成自動執(zhí)行的方式，需要的信息只需要開發(fā)者輸入或者選擇即可。

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

6.2 解決方案

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

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

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

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

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

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

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('歡迎使用發(fā)版小助手腳本')step('\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號，打tag用//?獲取當(dāng)前年份后兩位const?yearLastTwoBit?=?getLastTwoBitYear()console.log(yearLastTwoBit)//?獲取當(dāng)前是一年中的第幾周const?currentWeek?=?theWeek()console.log(currentWeek)//?本次的版本號const?targetVersion?=?(await?prompt({type:?'input',name:?'version',message:?'這次是本周第幾次發(fā)版？（請輸入數(shù)字）',})).versionconsole.log(targetVersion)//?前端服務(wù)名字const?serviceName?=?(await?prompt({type:?'input',name:?'serviceName',message:?'請輸入這個前端服務(wù)名字？（例如 fe_beg）',})).serviceNameconsole.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;//判斷是否為閏年，針對2月的天數(shù)進(jìn)行計算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 中增加一個npm script：

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

6.3.5 測試

運(yùn)行命令：

npm?run?release??

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

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

當(dāng)然這里，我沒有考慮許多的異常case , 健壯性不太好，有待優(yōu)化。

最后我非常感謝川哥，細(xì)心耐心給予我指導(dǎo)，解答我的問題。川哥人好又心善，勤勉又聰慧，實(shí)在是我學(xué)習(xí)的楷模～

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信江西?拉你進(jìn)群。

總結(jié)

以上是生活随笔為你收集整理的尤大是如何发布vuejs的，学完可以应用到项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： react（78）--vs打开setti
下一篇：面对 this 指向丢失，尤雨溪在 Vu