無需等待Vue Release釋出，就能在專案中體驗最新版

前端欧阳發表於2024-10-24
Vue

前言

兩個月前尤大在Vue 倉庫中引入了 pkg.pr.new，有了這個後Vue倉庫中的每個commit或者PR都會自動觸發一個新的釋出，我們就可以在專案中體驗最新版本的Vue啦。

關注公眾號：【前端歐陽】，給自己一個進階vue的機會

如何體驗最新版本Vue

我們先來看看如何使用最新版本Vue。很簡單，在Vue的GitHub上面去找一個open狀態的Pull request。如下圖：
open-pr

然後在這個PR中可以看到一個名為pkg-pr-new的機器人釋出的評論，如下圖：
bot

因為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資料夾，如下圖：
ci

這個.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

在actions頁面可以看到有很多工作流，工作流的名字就是ci檔案中定義的name欄位。ci.yml檔案中定義的name就是ci。

在右側透過Pull request的編號，就可以找到這個Pull request所觸發的ci工作流，點進去就是這樣的：
release

從上圖中可以看到在執行pkg-pr-new publish時將包釋出到pkg.pr.new站點的日誌了。

總結

Vue 引入了 pkg.pr.new後，每個commit或者PR都會自動觸發一個新的釋出到pkg.pr.new網站上面。並且和npm站點上面釋出的包不會衝突，我們也可以不用等待Vue釋出就可以體驗最新版本的Vue啦。

關注公眾號：【前端歐陽】，給自己一個進階vue的機會

另外歐陽寫了一本開源電子書vue3編譯原理揭秘，看完這本書可以讓你對vue編譯的認知有質的提升。這本書初、中級前端能看懂，完全免費，只求一個star。

相關文章