前言
两个月前尤大在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- minorjobs: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.ymlcontinuous-release:if: github.repository == 'vuejs/core'runs-on: ubuntu-lateststeps:- name: Checkoutuses: actions/checkout@v4- name: Install pnpmuses: pnpm/action-setup@v4- name: Install Node.jsuses: actions/setup-node@v4with:node-version-file: '.node-version'registry-url: 'https://registry.npmjs.org'cache: 'pnpm'- name: Install depsrun: pnpm install- name: Buildrun: pnpm build --withTypes- name: Releaserun: 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的机会
另外欧阳写了一本开源电子书vue3编译原理揭秘，看完这本书可以让你对vue编译的认知有质的提升。这本书初、中级前端能看懂，完全免费，只求一个star。
