「試着讀讀 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>
複製代碼