前言
兩個月前尤大在Vue 倉庫中引入了 pkg.pr.new，有了這個後Vue倉庫中的每個commit或者PR都會自動觸發一個新的釋出，我們就可以在專案中體驗最新版本的Vue啦。
關注公眾號：【前端歐陽】，給自己一個進階vue的機會
如何體驗最新版本Vue
我們先來看看如何使用最新版本Vue。很簡單，在Vue的GitHub上面去找一個open狀態的Pull request。如下圖：
然後在這個PR中可以看到一個名為pkg-pr-new的機器人釋出的評論，如下圖：
因為Vue是模組化設計，專案中的每個模組都會被髮布成一個包。這些模組的名字都是以@vue開頭的，並且支援單獨使用。
一般我們都是使用整個Vue中的功能，所以在專案中使用Vue一般都是：
pnpm add vue
這樣就是從npm中下載Vue的包的方法。
細心的小夥伴已經發現了，在圖中pnpm add的不是vue，而是一個連結：
pnpm add https://pkg.pr.new/vue@12227
因為 pkg.pr.new生成的Vue包是放到了pkg.pr.new自己網站上面的。不會發布到npm中， pkg.pr.new和npm是完全隔離的。
還有一點值得注意的是，當PR被關閉或者合併後，這個PR對應的pkg.pr.new站點中的包就會被清理。
Vue是如何整合pkg.pr.new的？
在Vue原始碼中可以看到有個.github/workflows資料夾，如下圖：
這個.github/workflows資料夾中包含一堆以.yml結尾的檔案，這些檔案是用來定義 GitHub Actions 工作流程的。
GitHub Actions 是 GitHub 提供的持續整合和持續部署（CI/CD）服務。
比如上面這種圖中的ci.yml檔案就定義了當程式碼push到Vue倉庫中的任何一個分支，或者是發起一個到main 或 minor 分支的 Pull request 時，就會執行ci.yml檔案中定義的jobs(任務)。
ci.yml的完整程式碼如下：
name: 'ci'
on:
push:
branches:
- '**'
tags:
- '!**'
pull_request:
branches:
- main
- minor
jobs:
test:
if: ${{ ! startsWith(github.event.head_commit.message, 'release:') && (github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository) }}
uses: ./.github/workflows/test.yml
continuous-release:
if: github.repository == 'vuejs/core'
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
- name: Install Node.js
uses: actions/setup-node@v4
with:
node-version-file: '.node-version'
registry-url: 'https://registry.npmjs.org'
cache: 'pnpm'
- name: Install deps
run: pnpm install
- name: Build
run: pnpm build --withTypes
- name: Release
run: pnpx pkg-pr-new publish --compact --pnpm './packages/*'
這個ci.yml定義了一個名為ci的工作流，觸發條件就是上面的on欄位定義的內容：當程式碼push到Vue倉庫中的任何一個分支，或者是發起一個到main 或 minor 分支的 Pull request 時。
工作流中的內容主要包含：檢出程式碼、安裝 pnpm、設定 Node.js 環境、安裝依賴、構建專案、釋出包。
pkg.pr.new是在build命令打包完成後工作的，執行的命令在是ci.yml檔案的末尾：
pnpx pkg-pr-new publish --compact --pnpm './packages/*'
執行這個命令後會將packages資料夾中的所有模組都發布到 pkg.pr.new站點上面。
我們也可以在GitHub網站的Actions中看到ci.yml工作流的執行日誌。
先在所有的工作流中找到名為ci的工作流，如下圖：
在actions頁面可以看到有很多工作流，工作流的名字就是ci檔案中定義的name欄位。ci.yml檔案中定義的name就是ci。
在右側透過Pull request的編號，就可以找到這個Pull request所觸發的ci工作流，點進去就是這樣的：
從上圖中可以看到在執行pkg-pr-new publish時將包釋出到pkg.pr.new站點的日誌了。
總結
Vue 引入了 pkg.pr.new後，每個commit或者PR都會自動觸發一個新的釋出到pkg.pr.new網站上面。並且和npm站點上面釋出的包不會衝突，我們也可以不用等待Vue釋出就可以體驗最新版本的Vue啦。
還有就是歐陽寫Vue程式碼時總是需要在瀏覽器和vscode之間切來切去，非常不方便，一直想要找一個好用的分割槽的軟體。
最近在研究剛買的明基RD280U顯示器發現竟然還有配套的軟體：Display Pilot2。這個軟體不光可以直接控制顯示器，比如調節亮度、切換顯示模式、旋轉顯示器等。還可以做一些更牛逼的事情，比如歐陽最喜歡的兩個功能：桌面分割槽和Flow。
桌面分割槽功能也是傻瓜式操作，直接將視窗拖到對應的區域就能直接分割槽啦。
這樣就能利用分割槽功能一邊寫程式碼，一邊在瀏覽器中看到頁面效果，還能同時看微信群訊息。
flow功能就更牛逼了，可以提前設定到指定時間段控制顯示器做某些事情。另外不光可以控制顯示器，還能開啟應用程式。
比如歐陽晚上coding結束後需要刷一下影片換換腦子，不然容易失眠。這時就會使用flow功能，每晚11點自動開啟B站APP，並且將coding時偏暗的“編碼模式”切換為刷影片較亮的“觀影模式”，實現自動化無縫切換。
關注公眾號：【前端歐陽】，給自己一個進階vue的機會
另外歐陽寫了一本開源電子書vue3編譯原理揭秘，看完這本書可以讓你對vue編譯的認知有質的提升。這本書初、中級前端能看懂，完全免費，只求一個star。