• Development tool vscode
  • Node version: node expected version “^ 10.13.0 | | ^ 12.13.0 | | ^ 14.15.0 | | > = 15.0.0”.

Debug ViteJS, the first step in learning the source code

forkSource warehouse to your warehouse

Fork the latest source code from the repository to your repository to make it easier to submit PR to the project

clone: Clone the project to your local, here take my Clone warehouse as an example

# Clone project
# cnpmjs
git clone https://github.com.cnpmjs.org/GeekQiaQia/vite.git

# or
git clone https://github.com/GeekQiaQia/vite.git

Enter the project directory
cd vite

# Install dependencies
yarn / npm install

Copy the code

link vite: CD to the vite root directory link vite

Mono-repo needs to share multi-Repo project resources in link mode

# vite root
yarn/npm link
Copy the code

Start the playgroundPalyground is used to test all features of Vite

# vite/packages/playground
Copy the code

We choose the test directory to test vue

# vite/packages/playground/vue

Install vue project dependencies
yarn/ npm install 

Start the test project
yarn / npm run dev

Copy the code

Start vue3.0 test project: http://localhost:3000/, for vite to vue3.0 function test;

Start the Vite project

# Node version: Node expected version "^ 10.13.0 | | ^ 12.13.0 | | ^ 14.15.0 | | > = 15.0.0". The yarn/NPM install # start the rollup yarn/NPM devCopy the code

At this point the Vite project generates the dist directory:

clientThe content of the file is simple and clear, and we are startingpalygrundYou can debug directly in the project; We mainly debug node service files;

Let’s use the node server file vite entry file cli.ts as an example. Let’s use the debug breakpoint in the createServer creation service.

  • Start the vsCode debugging module and select the Node.js environment.

  • At this time, you can enter the debug mode and debug the breakpoint step according to your needs.

  • Through the call stack, we can clearly know the execution process of Vitejs;

Open yourdebug ViteJSSource code debugging tour