vue2.0源码学习-源码调试环境搭建vue源码地址搭建调试环境1.拉取代码以后会有以下目录结构2.全局安装rollup

vue 源码地址

https://github.com/vuejs/vue

搭建调试环境

1.拉取代码以后会有以下目录结构

2.全局安装rollup和安装依赖

npm i rollup -g
npm i

3.修改package文件

//在dev中加入sourcemap
"scripts": {
    "dev": "rollup -w -c scripts/config.js --sourcemap --environment 
 }
 
 //然后执行
 npm run dev
 
 //执行结束之后在根目录下面的dist中会生成一个vue.js的映射文件vue.js.map
 //这样我们就可以在浏览器上对vue源码进行调试

4.源码调试

在根目录下面的examples文件中新建一个test文件夹，并创建一个html文件

在html中引入vue.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../dist/vue.js"></script>
</head>

<body>
    <div id="app"></div>
</body>

</html>
<script>
    const app = new Vue({
        el: '#app',
        template:
    })
</script>

打开浏览器，f12打开控制台,在如下位置便可以对源码进行调试了

查找入口文件

在我们执行npm run dev时可以看到我们执行的是这样一段代码

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

执行的文件位置 scripts/config文件中搜索.js
构建的目标 web-full-dev

在config文件中搜索web-full-dev可以找到这样一个对象，里面的entry就是入口文件

  'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.js'),
    format: 'umd',
    env: 'development',
    alias: { he: './entity-decoder' },
    banner
  }
  
  //resolve方法获取文件绝对路径
  const aliases = require('./alias')
  const resolve = p => {
  const base = p.split('/')[0]
  if (aliases[base]) {
    return path.resolve(aliases[base], p.slice(base.length + 1))
  } else {
    return path.resolve(__dirname, '../', p)
  }
}

//aliases获取路径
const path = require('path')

const resolve = p => path.resolve(__dirname, '../', p)

module.exports = {
  vue: resolve('src/platforms/web/entry-runtime-with-compiler'),
  compiler: resolve('src/compiler'),
  core: resolve('src/core'),
  shared: resolve('src/shared'),
  web: resolve('src/platforms/web'),
  weex: resolve('src/platforms/weex'),
  server: resolve('src/server'),
  sfc: resolve('src/sfc')
}

根据上面的代码我们便可以找到vue入口文件的位置了

vue/src/platforms/web/entry-runtime-with-compiler.js

接下来就可以开始进行源码的解析之旅了