preamble
Two months ago, UU introduced theWith this, every commit or PR in the Vue repository automatically triggers a new release, which we can experience in our projects.latest versionThe Vue la.
Follow the public number: [Front-end Ouyang], give yourself a chance to advance vue
How to experience the latest version of Vue
Let's start by looking at how to use the latest version of Vue. it's simple, go to Vue's GitHub and find aopen statePull request. as shown below:
Then in this PR you can see a PR namedpkg-pr-newThe comments posted by the bots are shown below:
Because Vue is modular in design, each module in the project is published as a package. These modules are named after the@vueopenings and supports stand-alone use.
Generally we use the entire functionality in Vue, so using Vue in a project is generally:
pnpm add vue
This would be the first step fromnpmThe way to download Vue's packages in the
Attentive partners have already noticed that in the picturepnpm addNo.vue, but rather a link:
pnpm add /vue@12227
on account ofThe generated Vue package is put into theOwn website above. Won't post to npm.and npm are completely isolated.
It's also worth noting that when a PR is closed or merged, that PR corresponds to aThe packages in the site are then cleaned up.
How Vue integratesOf?
In the Vue source code you can see that there is a.github/workflowsfolder, as shown below:
this one.github/workflowsThe folder contains a bunch of files starting with.ymlending files that are used to define the GitHub Actions workflow.
GitHub Actions is a Continuous Integration and Continuous Deployment (CI/CD) service provided by GitHub.
For example, in a diagram like the one abovefile defines that when code is pushed to any branch in the Vue repository, or when a Pull request is initiated to the main or minor branch, theThe jobs defined in the file.
The full code for the following is shown below:
name: 'ci'
on:
push:
branches:
- '**'
tags:
- '!**'
pull_request:
branches:
- main
- minor
jobs:
test:
if: ${{ ! startsWith(.head_commit.message, 'release:') && (github.event_name == 'push' || .pull_request..full_name != ) }}
uses: ./.github/workflows/
continuous-release:
if: == 'vuejs/core'
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
- name: Install
uses: actions/setup-node@v4
with:
node-version-file: '.node-version'
registry-url: ''
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/*'
this onedefines a file namedciworkflow, the trigger condition is the aboveonWhat the field defines: when code is pushed to any branch in the Vue repository, or a Pull request is initiated to the main or minor branch.
The workflow consists of checking out the code, installing pnpm, setting up the environment, installing dependencies, building the project, and releasing the package.
is working after the build command has finished packaging, the command to execute in is theThe end of the document:
pnpx pkg-pr-new publish --compact --pnpm './packages/*'
Executing this command will move thepackagesAll modules in the folder are published to theSite above.
We can also see in Actions on the GitHub site thatWorkflow execution log.
Start by finding in all the workflows the workflow namedciof the workflow, as shown below:
On the actions page you can see that there are a number of workflows, and the name of the workflow is the name field defined in the ci file.The name defined in the file isci。
On the right hand side, by the number of the Pull request, you can find out what this Pull request triggersciWorkflow, click on it and that's it:
As you can see in the figure above, the execution of thepkg-pr-new publishWhen you publish the package to theThe site's logs are up.
summarize
Vue introduces theAfter that, each commit or PR automatically triggers a new publish to theThe website is above. And there is no conflict with the packages released on the npm site, so we can experience the latest version of Vue without having to wait for it to be released.
Follow the public number: [Front-end Ouyang], give yourself a chance to advance vue
Also Ouyang wrote an open source ebookvue3 Compilation Principles Revealed, reading this book can give you a qualitative improvement in your knowledge of vue compilation. This book is accessible to beginner and intermediate front-ends and is completely free, just asking for a STAR.