Through this article you will learn the following:
- 1, npm create specific execution process
- 2, three libraries of minimist, prompts and kolorist
- 3. Source code analysis of create-vite
Vite source code download:
//复制一份vite源码到自己的本地
git clone https://github.com/vitejs/vite.git
//安装依赖 npm i
First, how does the npm create vite command trigger?
From the viteofficial documentation, we can know that we can npm create viteinitialize a viteproject through , so npm create vitehow does it work? With this question in mind, I checked npmrelevant information.
First of all, we must first understand npmwhat exactly is it? Excerpted from the official explanation: NPMThe full name is Node Package Managera NodeJSpackage management and distribution tool, which has become the standard for unofficial release Nodemodules (packages). We can compare it to a package management tool. Therefore, the packages that users want to use and the packages that they want to provide to others can be "traded" through this tool. Since it is a tool, to use it, you need to abide by the rules it makes. But to understand npm createthe principle of , you must first know npm init. As you can see from the picture below, they are one thing.
On the official website of npm, we learned that npm init + initializer, npmwill execute the npm execcommand. npm create vite->npm exec create vite
npm exec: run command from local or remote npm package
Here, npmthe create-vitepackage , and then package.json binthe create-vitecommand will be run. Next, let's open the source code for analysis to see what ispackage.json bin actually executed in ?create-vite
2. Source code directory analysis and code debugging
After we githubdownloaded vitethe source code, open the directory, first analyze its directory structure, you can see the following figure:
We find the command create-vitepackage corresponding topackage.json bincreate-vite
find the finalindex.ts
Next, debug the code. After working for a long time, I tscan't directly nodeexecute the command. I found two methods to debug on the Internet.
One is to use vscodecompile it into jsexecute the code.
One is to use npx esno src/index.tsor npx tsx src/index.tsto debug.
npx esno src/index.tsOpening the debug terminal with will report an error .
I don’t know why, but the break point of the second method cannot take effect, so when debugging the code, an error will be reported, or compile it first jsand then execute it. During the execution process, I encountered the error shown in the figure below. After troubleshooting, I found that it was a nodeJsversion problem. I used10.15.3
Need to pay attention to the nodeJsversion:
Three, init main process source code analysis
Before the analysis, you first need to be familiar with several libraries introduced in the code.
Then look at the code, it will be much easier
1. Obtain the user's input and options, as well as the specific directory of the project download.
2. Determine whether there are custom attributes
3. Obtain the template directory and write it to the user-specified folder, and modify the package.json file
4. Prompt the user how to run the initialization project
Fourth, the extension function
1. File copy
2. Replace the backslash /with an empty string
3. Information processing corresponding to the package manager
At last
Recently, I also sorted out a JavaScript and ES note, a total of 25 important knowledge points, and explained and analyzed each knowledge point. It can help you quickly master the relevant knowledge of JavaScript and ES, and improve work efficiency.
Friends in need, you can click the card below to receive and share for free