vue2原始碼學習 — new Vue()

參考：https://blog.csdn.net/qq_36782473/article/details/109108477

除錯環境

獲取vue原始碼

專案地址：https://github.com/vuejs/vue

除錯環境搭建

• 安裝依賴： npm i
• 安裝rollup： npm i -g rollup
• 修改package.json總的dev指令碼，新增sourcemap

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

• 執行開發命令： npm run dev

目錄結構說明

專案執行入口檔案

從pageage.json開始看起

• 根據package.json檔案的dev配置項，找到 scripts/config.js 中的 web-full-dev

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

  '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
  },
 

• web/entry-runtime-with-compiler.js是專案打包的入口檔案，web是別名，找到真實路徑。 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)
  }
}
 

• 開啟scripts/alias.js, 找到web對應的路徑：src/platforms/web

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')
}

• 根據path.resolve(aliases[base], p.slice(base.length + 1))可以得出真實路徑是：

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

注意：此檔案是帶編譯器的版本，是為了方便我們更清晰的瞭解整個Vue工作機制。在我們日常工作中使用的webpack是不帶編譯器的版本，而是通過額外注入的vue-loader實現的

new Vue()初始化過程