「试着读读 Vue 源代码」工程目录及本地运行（断点调试）

时间 2019-11-09

标签试着 vue 源代码工程目录本地运行断点调试繁體版

原文原文链接

说明

首先这篇文章是读 vue.js 源代码的梳理性文章，文章分块梳理，记录着本身的一些理解及大体过程；更重要的一点是但愿在 vue.js 3.0 发布前深刻的了解其原理。html
若是你从未看过或者接触过 vue.js 源代码，建议你参考如下列出的 vue.js 解析的相关文章，由于这些文章更细致的讲解了这个工程，本文只是以一些 demo 演示某一功能点或 API 实现，力求简要梳理过程。vue
- 逐行级别的源码分析 - 强烈推荐
- Vue.js 源码分析
- Vue.js 源码解析
若是搞清楚了工程目录及入口，建议直接去看代码，这样比较高效 ( 遇到难以理解对应着回来看看别人的讲解，加以理解便可 )node
文章所涉及到的代码，基本都是缩减版，具体还请参阅 vue.js - 2.5.17。git
若有任何疏漏和错误之处欢迎指正、交流。github

简单谈谈工程结构

上图简单介绍了整个 vue.js 的工程目录，咱们关注的点：web

如何使 vue.js 跑起来，即本地运行（下降代码阅读难度）
如何下手阅读，即找到咱们所关心的入口（紧接着顺着思路往下走）

本地运行（断点调试）

首先找到 `package.json`

...
  "scripts": {
     "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
     "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs",
     "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
     "dev:test": "karma start test/unit/karma.dev.config.js",
     "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",
     "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler ",
     "dev:weex": "rollup -w -c scripts/config.js --environment TARGET:weex-framework",
     "dev:weex:factory": "rollup -w -c scripts/config.js --environment TARGET:weex-factory",
     "dev:weex:compiler": "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ",
     "build": "node scripts/build.js",
     "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
     "build:weex": "npm run build -- weex",
     "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run
              test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex",
     "test:unit": "karma start test/unit/karma.unit.config.js",
  },
  ...
复制代码

就本地运行、断点调试，咱们只需关注 ”dev“ 选项；简单解释一下，npm run dev 执行 scripts/config.js 目标为 web-full-devnpm

`config.js` 简单介绍

const builds = {

  ...

  // Runtime+compiler development build (Browser)
  '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
  },

  ...

};

function genConfig(name) {
  const opts = builds[name]; // 映射目标配置
  const config = {
    input: opts.entry,
    external: opts.external,
    plugins: [...].concat(opts.plugins || []),
    output: {
      file: opts.dest,
      format: opts.format,
      banner: opts.banner,
      name: opts.moduleName || 'Vue'
    },
    sourceMap: true // 为了更清晰调试代码，建议你开启
  };

  ...

  return config;
}

if (process.env.TARGET) {
  module.exports = genConfig(process.env.TARGET);
}
...

复制代码

在 genConfig - config中添加 sourceMap: true, 为了可以在断点调试时，把代码映射到单文件内部。json
根据 package.json "dev" 映射知道了 web-full-dev 再由配置文件找到入口文件：entry: resolve('web/entry-runtime-with-compiler.js')weex
- "web" 别名配置 - alias.js 查看实际映射为 web: resolve('src/platforms/web')
- 最终锁定了入口文件：src/platforms/web/entry-runtime-with-compiler.js

执行代码并调试

安装依赖： npm i | yarnapp
运行: npm run dev | yarn dev
- 运行后会在 dist 目录下生成两个文件 vue.js vue.js.map
引入生成 vue.js 代码, demo 以下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>vue.js DEMO</title>
    <script src="dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{ message }}</p>
    </div>

    <script> new Vue({ el: '#app', data: { message: 'hello vue.js' } }); </script>
  </body>
</html>
复制代码

承接下文 - 「试着读读 Vue 源代码」初始化先后作了哪些事情 ❓

「试着读读 Vue 源代码」工程目录及本地运行（断点调试）

说明

简单谈谈工程结构

本地运行（断点调试）

首先找到 package.json

config.js 简单介绍

执行代码并调试

首先找到 `package.json`

`config.js` 简单介绍