Download the source code
git clone [email protected]:vuejs/vue-next.git
cd vue-next
pnpm i
Copy the codeThe latest version of VUe3 must be installed using PNPM dependencies. For those unfamiliar with PNPM, check out the official documentation or this article
To build the source code
npm run dev --sourcemap
Copy the codeBuild the vue source code and the build product will be packages\vue\dist\vue.global.js.
As the default vUE package build, does not generate sourcemap, so we need to add –sourcemap, generate sourcemap, in order to facilitate later debugging, Chrome can build the compressed code according to sourcemap, restore source code.
Create a simple demo project
cd packages
mkdir vue-demo
Copy the codeIn vue-demo, create the following index.html file
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src=".. /vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
const App = {
template:` {{name}}
`.setup() {
const name = Vue.ref("vue setup")
return {
name
}
}
}
let vm = Vue.createApp(App).mount("#app");
</script>
</body>
</html>
Copy the codeIn index.html, use script to import the vue.global.js file you just built.
Then we can access the Vue object through window.vue
The preview result is as follows:
Now you can modify the index.html and debug the code
If we want to use the Vite project as a demo, we can read on
The project to create vite
Create the Vite project under the Packages folder, directly through the scaffolding
cd packages
pnpm create vite
cd vite-project
pnpm i
Copy the codeAfter the project is created, we go to the directory and directly PNPM I. Since it is a Monorepo project, PNPM will install the local VUE into the project
Then we run the vite project dev command directly:
cd vite-project
npm run dev
Copy the codeYou will find the following error:
The error is as follows:
try {
compiler = require("vue/compiler-sfc");
} catch (e) {
try {
compiler = require("@vue/compiler-sfc");
} catch (e2) {
throw new Error('@vitejs/plugin-vue requires vue (>=3.2.13) or @vue/ compiler-sFC to be present in the Dependency tree.); }}Copy the codeThis is because loading vUE/Compiler-SFC or @vue/ Compiler-SFC failed.
Why does loading fail? The reason is that we didn’t build a series of packages like Vue.
Here is the package.json of one of the packages. Main is the file that will be used when Node require is introduced, and module is the file that will be used when es import is introduced
// packages/vue/package.json
{
"name": "vue"."version": "3.2.23"."description": "The progressive JavaScript framework for buiding modern web UI."."main": "index.js"."module": "dist/vue.runtime.esm-bundler.js"."types": "dist/vue.d.ts"."unpkg": "dist/vue.global.js"
}
Copy the codeSo, we need to run the build, and before we do that, we need to make the package.json of the viet-project private so that Vue doesn’t build the project as a package of Vue
Add “private”: “true” to package.json
// packages/vite-project/package.json
{
"name": "vite-project"."version": "0.0.0"."scripts": {
"dev": "vite"."build": "vue-tsc --noEmit && vite build"."preview": "vite preview"
},
"dependencies": {
"vue": "^ 3.2.25"
},
"devDependencies": {
"@vitejs/plugin-vue": "^ 2.0.0." "."typescript": "^ 4.4.4." "."vite": "^ 2.7.2." "."vue-tsc": "^ 0.29.8"
},
"private": "true"
}
Copy the codeModify the root directory package.json
{
"build": "node scripts/build.js --sourcemap",}Copy the codeTo perform the build, run in the root directory:
pnpm run build
Copy the codeThis command builds all packages under Packages (except private) and outputs artifacts in various formats (CJS, ESM, and so on)
What we need is CJS, which is introduced when Vite starts the server, and ESM, which is used when Vite builds
To get vite demo up and running, run the following command:
CD vite - project NPM run dev -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- vite v2.7.7 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 1231ms.
Copy the codeIf we need to change the source code, we don’t have to rebuild it every time we change it, we just need to rebuild the package.
We can use the dev script because it allows Watch to listen for changes and rebuild automatically.
If you need to modify the reactivity package, just run this command.
{
"dev": "node scripts/dev.js --sourcemap -f esm-bundler reactivity",
}
Copy the codeNote that the output format is esm-bundler, because the module imports reactivity.esm-bundler.js, which corresponds to esM-bundler
{
"name": "@vue/reactivity"."module": "dist/reactivity.esm-bundler.js",}Copy the codeOk, so you can have fun writing code again