浅曦Vue源码-1-准备工作Vue3 都已经出道很久，但是 Vue2 的源码还没读完，借着这个更文活动作为契机，整理一番

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

一、感慨一下

现如今又要过年了，时间过得真心快。Vue3 都已经出道很久，但是 Vue2 的源码还没读完，只能安慰自己说：重温经典永不过时吧。借着这个更文活动作为契机，整理一番。

二、说明

本系列小作文将会以完整的 vue.js 为母版展开学习，关于何为完整 vue.js 简单讲一下，就是运行时包含了编译器部分，即把模板编译成 ast 的部分。大家平时通过 webpack+vue-loader+vue （包含vue-cli）的方式开发时，编译都是由 vue-loader 在编译时处理的编译，在运行时就不再需要编译器部分了。我说的不够准确，但不是重点，这里上 Vue.js 官网文档

关于 vue-loader + webpack 这种处理方式也是这次更文的一个重点，后续会突破的，这里先挖个坑吧，慢慢填吧，如果我后面没更，随时来批斗我，鞭策我吧。

2.1 下载源码

这个大家都会的，去 github 上下载，只需要克隆即可：

$ git clone git@github.com:vuejs/vue.git

2.2 打包一个有 source-map 的 vue.js

2.2.1 修改打包命令

进入到 2.1 克隆下来的 vue ，在 dist 下有 vue.js 完整版，但是这个目录下是没有 sourcemap文件，浏览器打断点的方式来读源码，这样就需要和源码有个映射。

Vue 是通过 rollup 打包的，其打包命令在 package.json 的 dev 命令：

{
  "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",
  }
 }

而我们要做的就是在 dev 这个命令的后面添加上一个 --sourcemap 参数，这样指示 rollup 产出 sourcemap 文件。

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

2.2.2 安装依赖

修改好上面的打包命令后，回到 vue 根目录，执行： npm install 命令，注意执行 npm install 时可能会遇到 PhantomJS not found on PATH ...... Error making request. Error: unable to verify the first certificate.... 这个安装 PhantomJS 失败的情况，这个不用管，这个是用来做框架代码测试的，与打包无关，如果你安装时没遇到，但是可能安装时间也很长，你可以提前 ctrl+c 终止安装。

2.2.3 打包

执行 npm run dev 命令，执行完你会发现处在 watch 状态了，这个可以不用关心了，直接 ctrl+c 停止即可，如图：

进入到 dist 目录下，检查是否有 map 文件，如图：

这个 vue.js.map 就是 vue.js 的 sourcemap 文件，这个是我们后面看源代码的利器；

三、创建一个 demo

有了上面的 sourcemap 我们要做的就是创建一个 test.html 把，vue.js 通过 script 引入，然后写一个简单的 demo，

3.1 项目目录

├── dist
│   ├── vue.js
│   └── vue.js.map
├── test.html

这里 dist/vue.js 和 dist/vue.js.map 就是前面 2.3 得到的产物

3.2 test.html

<!DOCTYPE html>
<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: `
      <div style="color: red;background: #5cb85c;display: inline-block">{{ someKey + foo }}</div>`,
    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>

3.3 打开这个 html 文件

在浏览器中打开这个 test.html 文件，启动控制台，看到如下这个操作，就说明这部分准备工作已经完成了，如图：

四、总结

下载源码
修改打包命令
打包出 map 文件
新建 html demo