1 Introduction
Hello everyone, I am Ruochuan. I have devoted myself to organizing source code sharing for more than a year. If you are interested, you can add me on WeChat lxchuan12 to participate. In addition, if you want to learn source code, I highly recommend paying attention to my column “Learning the Overall Architecture of Source Code Series”, which is currently the column with the number one Nuggets followers (4.7k + people), and has written more than 20 source code articles.
2. What are the steps to learn from open source projects?
Looking at an open source repository, the first step is generally to look at the README.md and contributing.md contribution guide documents.
README.mdusually has a link to the contribution guide documentation. The contribution guidelines document is for others to contribute to the project.
The Contributing Guide writes a lot about participating in the development of the project. For example, how to run, what is the project directory structure. How to invest in development, what knowledge reserves are needed, etc.
The second step is to clone it. According to the contribution guide document, run the project.
3. How to debug vue3 source code
Let’s learn how to debug vue3 source code this time, see vue3 source code [1] warehouse contributing.md[2].
Part of contributing.md
Development Setup
You will need Node.js[3]version 16 + , and PNPM[4]version 7 + .
We also recommend installing ni[5] to help switching between repos using different package managers.
nialso provides the handynrcommand which running npm scripts easier.
After cloning the repo, run:
$ pnpm i # install the dependencies of the project
Regarding the ni mentioned above, I have written a source code article for reference.
You Yuxi recommends the artifact ni, can it replace npm/yarn/pnpm? Simple and easy to use! Source code revealed!
From the contribution guide, we can learn some information, so first clone the project and install dependencies.
git clone https://github.com/vuejs/core.git cd core # install dependencies pnpm i
4. Debugging method using vitest vscode extension
Install vitest vscode extension link [6], vitest vscode extension github[7]
Install vitest-runner vscode extension link [8], vitest-runner vscode extension github[9]
// packages/vue/__tests__/index.spec.ts
import { vi } from 'vitest'
import { EMPTY_ARR } from '@vue/shared'
import { createApp, ref, nextTick, reactive } from '../src'
describe('compiler + runtime integration', () => {
it('should support runtime template compilation', () => {
const container = document. createElement('div')
const App = {
template: `{<!-- -->{ count }}`,
data() {
return {
count: 0
}
}
}
// You can press and hold alt + click the left mouse button to jump to the function, breakpoint in advance to where you want to breakpoint
createApp(App).mount(container)
expect(container. innerHTML).toBe(`0`)
})
// omit some code
}
As shown in the gif picture below, it is time to debug the vue source code.
Regarding the functions of the buttons at the top of the gif diagram, I once wrote an article for beginners: Front-end programmers must learn basic skills-debugging JS code
Debug the source code through the test cases of open source projects. Its advantage is that it does not need to be packaged and is closer to the source code. For open source projects with high test coverage, you can only do targeted debugging for a certain function, and you can learn to use it directly in the process of watching the test cases. . This debugging method may be a source code debugging method that most people have never used, because most people may not have learned the testing framework.
The test case of Vue source code is now changed to Vitest[10].
In the same way, if the open source project uses the Jest testing framework, you can install `Jest`[11], `Jest Runner`[12]vscode plugin.
5. Debug by generating sourcemap
5.1 How to generate sourcemap
The document contributing.md[13] of the contribution guide has written:
Build with Source Maps
Use the --sourcemap or -s flag to build with source maps. Note this will make the build much slower.
pnpm run build -s
After execution, all generated sourcemap files, as shown in the figure below.
Through the sourcemap file, you can find the original file information.
We can see a command to start the service in package.json in the root directory.
{
"private": true,
"version": "3.3.0-alpha.4",
"packageManager": "[email protected]",
"type": "module",
"scripts": {
"serve": "serve",
},
}
At this time, execute this command on the command line terminal to start the service.
pnpm run serve
Open http://localhost:5000 in the browser to find the corresponding path.
For example, we open the todomvc example in this source code to debug. http://localhost:64085/packages/vue/examples/composition/todomvc
// packages/vue/examples/composition/todomvc.html
<script src="../../dist/vue.global.js"></script>
<script>
const { createApp, reactive, computed, watchEffect, onMounted, onUnmounted } = Vue
// omit some code
// We can breakpoint debugging here
createApp({
setup () {
// omit some code
}).mount('#app')
The file vue.global.js is first introduced at the beginning of the file, and the comment at the bottom indicates the sourcemap file URL.
// ../../dist/vue.global.js
var Vue = (function (exports) {})({});
//# sourceMappingURL=vue.global.js.map
We can debug with a breakpoint at the createApp function, and then debug with a breakpoint in the createApp function, which is to debug the original source code. It is also debugged like the vitest vscode plugin mentioned above.
Debugging is shown in the gif picture below.
So far, we have also learned to generate sourcemap files and debug source code according to the commands provided in the project.
5.2 Why can the sourcemap be generated in the way written in the contribution guide?
Some friends may be curious, why contribute to the guide, pnpm run build compile and add parameters --sourcemap or -s to generate sourcemap . Let’s explore why --sourcemap or -s can generate sourcemap next.
Check the package.json file in the root directory of the project, we can know: build command actually executes node scripts/build.js.
{
"private": true,
"version": "3.3.0-alpha.4",
"packageManager": "[email protected]",
"type": "module",
"scripts": {
"dev": "node scripts/dev.js",
"build": "node scripts/build.js",
},
}
Find this file scripts/build.js.
// scripts/build.js
import minimist from 'minimist'
import execa from 'execa'
const args = minimist(process. argv. slice(2))
const sourceMap = args.sourcemap || args.s
async function build(target) {
// omit some code
const env =
(pkg. buildOptions & & pkg.buildOptions.env) ||
(devOnly? 'development' : 'production')
await execa(
'rollup',
[
'-c',
'--environment',
[
`COMMIT:${commit}`,
`NODE_ENV:${env}`,
`TARGET:${target}`,
formats ? `FORMATS:${formats}` : ``,
prodOnly ? `PROD_ONLY:true` : ``,
sourceMap ? `SOURCE_MAP:true` : ``
]
.filter(Boolean)
.join(',')
],
{ stdio: 'inherit' }
)
}
minimist[14] is for parsing command line arguments. execa[15] is the subprocess execution command.
Equivalent to executing rollup on the command line terminal [16] Packaging: rollup -c --environment COMMIT:650f5c2,NODE_ENV:production,TARGET:compiler-ssr,SOURCE_MAP:true
Seeing this, we know that the original parameter --sourcemap or -s controls SOURCE_MAP:truerollup > parameter to control whether a sourcemap file is generated.
6. Summary
So far, let’s summarize.
When looking at open source projects, you must first read the official README.md and the contribution guide contributing.md.
This is written by open source project maintainers for developers who want to contribute.
We have learned to install vitest vscode extension [17], vitest-runner vscode extension github[18], according to the test case, specify the corresponding test case to debug the corresponding source code.
Test cases are very important. Moreover, vitest[19] is a Chinese document, which is relatively easy to learn, and it is very worthwhile for us to learn.
In addition, we learned how to generate sourcemap, and debug the source code of Vue3 through the examples provided by the project. At the same time, it also explores why it is possible to control whether to compile and generate sourcemap files by passing parameters during compilation. The essence is to use command line parameters to finally control the SOURCE_MAP:true of the rollup packaging tool parameter.
This article is relatively simple as a whole, mainly in whether you know these two ways of debugging source code. If looking at the source code is like climbing a mountain, then learning to debug can be said to be the way to find the entrance of the mountain and climb the mountain. The real climbing is when it is more difficult.
If you have gained something after reading it, please like, comment, share and support. Your support and affirmation is the driving force for my writing.
References
[1]
Vue3 source code: https://github.com/vuejs/core.git
[2]
contributing.md: https://github.com/vuejs/core/blob/main/.github/contributing.md
[3]
Node.js: https://nodejs.org
[4]
PNPM: https://pnpm.io
[5]
ni: https://github.com/antfu/ni
[6]
vitest vscode extension link: https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer
[7]
vitest vscode extension github: https://github.com/vitest-dev/vscode
[8]
vitest-runner vscode extension link: https://marketplace.visualstudio.com/items?itemName=kingwl.vscode-vitest-runner
[9]
vitest-runner vscode extension github: https://github.com/kwai-explore/vscode-vitest-runner
[10]
Vitest: https://cn.vitest.dev/guide/
[11]
Jest: https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest
[12]
Jest Runner: https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner
[13]
Document contributing.md for contribution guide: https://github.com/vuejs/core/blob/main/.github/contributing.md
[14]
minimist: https://github.com/minimistjs/minimist
[15]
execa: https://github.com/sindresorhus/execa
[16]
rollup: https://rollupjs.org/guide/en
[17]
vitest vscode extension: https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer
[18]
vitest-runner vscode extension github: https://github.com/kwai-explore/vscode-vitest-runner
[19]
vitest: https://cn.vitest.dev/guide/
············································································
Hello, I am Ruochuan, graduated from Jiangxi University. Now a front-end development “engineer”. He has written more than 20 articles on “Learning the Overall Architecture of Source Code Series”, and has received more than one million readings in Zhihu and Nuggets.
Since 2014, I have written an annual summary every year. I have been writing for 8 years. Click to view the annual summary.
At the same time, we have continued to organize source code co-reading activities for more than a year, helping 5000+ front-end people learn to read source code. Official account vision: Help front-end people to move to the forefront within 5 years.
Scan the QR code to add me on WeChat lxchuan12, pull you into the Source Code Shared Reading group
topic of the day
At present, there is a Jiangxi|Hunan|Hubei front-end group. If you want to join the group, you can add me on WeChat lxchuan12 to join the group. Share, bookmark, like, and read My article is the greatest support for me~