Shallow Xi Vue source code -1- preparation

This is the second day of my participation in the First Challenge 2022.

First, let’s sigh

Now the New Year is coming, time flies really fast. Vue3 has been out for a long time, but the source code of Vue2 has not been read, so I can only console myself by saying: it is never out of style to revisit the classics. Use this activity as an opportunity to tidy up.

Second, description,

This series of essays will start with the complete vue.js master. A brief explanation of what a complete vue.js is is that the runtime includes a compiler part, that is, the part that compiles the template into the AST. We usually through webpack+vue-loader+ VUE (including vue-CLI) way of development, compilation is processed by vue-loader during compilation, compiler part is no longer needed at runtime. What I said is not accurate enough, but it is not the point. Here is the official document of vue.js

On vue-loader + webpack this kind of processing is also a key point of this more article, the follow-up will break through, here first dig a pit, slowly fill it, if I don’t have more, at any time to criticize me, spur me.

2.1 Download Source Code

Everyone knows this, go to Github and download it, just clone it:

$ git clone [email protected]:vuejs/vue.git
Copy the code

2.2 Package a vue.js with source-map

2.2.1 Modifying a package Command

In vue cloned in 2.1, there is the full vue. Js version in dist, but there is no sourcemap file in this directory. The browser interrupts the way to read the source code, so there needs to be a mapping with the source code.

Vue is packaged by rollup in the package.json dev command:

{
  "name": "vue"."version": "2.6.14"."description": "Reactive, component-oriented view layer for modern web interfaces."."sideEffects": false."scripts": {
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",}}Copy the code

All we need to do is add a –sourcemap parameter to the end of the dev command, which tells rollup to produce the sourcemap file.

{
  "scripts": {
    "dev": "rollup --sourcemap -w -c scripts/config.js --environment TARGET:web-full-dev",}}Copy the code

2.2.2 Installing Dependencies

After modifying the package command, go back to the vue root directory and run the: NPM install command. Note PhantomJS not found on PATH…… may be encountered during NPM install execution Error making request. Error: unable to verify the first certificate…. If PhantomJS fails to be installed, this is for framework code testing, and has nothing to do with packaging. If you do not encounter PhantomJS when you install it, but the installation may take a long time, you can terminate the installation by CTRL + C.

2.2.3 packaging

After executing the NPM run dev command, you will find that you are in the watch state. Don’t worry about this, just stop by CTRL + C, as shown in the picture:

Go to the dist directory and check whether there is a map file, as shown in the figure below:

This vue.js.map is the vue.js sourcemap file, and this is the tool for us to look at the source code later;

Create a demo

So with sourcemap above all we need to do is create a test.html and import vue.js via script and write a simple demo,

3.1 Project Catalog

├ ─ ─ dist │ ├ ─ ─ vue. Js │ └ ─ ─ vue. Js. Map ├ ─ ─ test. The HTMLCopy the code

Dist /vue.js and dist/vue.js.map are the products of previous 2.3

3.2 test. HTML

<! DOCTYPEhtml>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue</title>
</head>
<body>
<div id="app">
 {{ msg }}
 <some-com :some-key="msg"></some-com>
</div>
<script src="./dist/vue.js"></script>
<script>
  debugger
  const sub = {
    template: ` 
       
        {{ someKey + foo }}
       
`.props: {
      someKey: {
        type: String.default: 'hhhhhhh'}},inject: ['foo']};new Vue({
    el: '#app'.data: {
      msg: 'hello vue'
    },
  hahaha: 'hahahahahha'.provide: {
      foo: 'bar'
  },
  components: {
      someCom: sub
  }
  })
</script>
</body>
</html>
Copy the code

3.3 Open the HTML file

Open the test.html file in a browser, start the console, and see the following action to indicate that this part of the preparation is complete, as shown in the figure below:

Four,

Download the source code
Modifying package commands
Package out the map file
The new HTML demo