Vue————Vue v2.7.14 入口文件【二】

2023-03-11 06:14:50 来源：博客园

(资料图片)

前言

按着我的习惯，拿到一个项目首先我会查看项目下的README.md其次查看package.json，这里也不例外看过 README.md 后，来看下package.json;GitHubgithub page

内容

package.json

vue package.json 字段解释

这里我一般只关注script部分，从这里我们再抽丝剥茧。

"scripts": {    "dev": "rollup -w -c scripts/config.js --environment TARGET:full-dev",    "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:runtime-cjs-dev",    "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:runtime-esm",    "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:server-renderer",    "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:compiler ",    "build": "node scripts/build.js",    "build:ssr": "npm run build -- runtime-cjs,server-renderer",    "build:types": "rimraf temp && tsc --declaration --emitDeclarationOnly --outDir temp && api-extractor run && api-extractor run -c packages/compiler-sfc/api-extractor.json",    "test": "npm run ts-check && npm run test:types && npm run test:unit && npm run test:e2e && npm run test:ssr && npm run test:sfc",    "test:unit": "vitest run test/unit",    "test:ssr": "npm run build:ssr && vitest run server-renderer",    "test:sfc": "vitest run compiler-sfc",    "test:e2e": "npm run build -- full-prod,server-renderer-basic && vitest run test/e2e",    "test:transition": "karma start test/transition/karma.conf.js",    "test:types": "npm run build:types && tsc -p ./types/tsconfig.json",    "format": "prettier --write --parser typescript \"(src|test|packages|types)/**/*.ts\"",    "ts-check": "tsc -p tsconfig.json --noEmit",    "ts-check:test": "tsc -p test/tsconfig.json --noEmit",    "bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js",    "release": "node scripts/release.js",    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"  }

根据上面的一些运行命令，我们可以看到 vue 的 dev 是使用rollup来进行打包的，这时候我们直接看dev命令对应的配置文件（scripts/config.js）里面有些什么。

初入 VUE | 寻找入口

进入后我们根据命令参数full-dev进行搜索，会发现以下代码；

// Runtime+compiler development build (Browser)  "full-dev": {    entry: resolve("web/entry-runtime-with-compiler.ts"),    dest: resolve("dist/vue.js"),    format: "umd",    env: "development",    alias: { he: "./entity-decoder" },    banner  },

点击 resolve 进行跳转，跳转到 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)  }}

根据上方的代码，我们再跳转到引入 alias 文件中，这时候不难发现 vue 对应的入口文件是src/platforms/web/entry-runtime-with-compiler;

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"),  server: resolve("packages/server-renderer/src"),  sfc: resolve("packages/compiler-sfc/src")}

vue 入口代码内容

import Vue from "./runtime-with-compiler"import * as vca from "v3"import { extend } from "shared/util"extend(Vue, vca)import { effect } from "v3/reactivity/effect"Vue.effect = effectexport default Vue

深入 VUE | 深度挖掘

既然都找到 vue 的入口文件，那我们肯定是要继续挖掘的！

寻找根源

点击import Vue from "./runtime-with-compiler"引入文件进行跳转，来到runtime-with-compiler.ts

import config from "core/config"import { warn, cached } from "core/util/index"import { mark, measure } from "core/util/perf"import Vue from "./runtime/index"import { query } from "./util/index"import { compileToFunctions } from "./compiler/index"import {  shouldDecodeNewlines,  shouldDecodeNewlinesForHref} from "./util/compat"import type { Component } from "types/component"import type { GlobalAPI } from "types/global-api"

再次跳转

根据import Vue from "./runtime/index"的引用，我们可以知道还需要再次跳转runtime/index.ts

import Vue from "core/index"import config from "core/config"import { extend, noop } from "shared/util"import { mountComponent } from "core/instance/lifecycle"import { devtools, inBrowser } from "core/util/index"

三次跳转

好东西果然藏得比较深，根据import Vue from "core/index"的引用，跳转到core/index

import Vue from "./instance/index"import { initGlobalAPI } from "./global-api/index"import { isServerRendering } from "core/util/env"import { FunctionalRenderContext } from "core/vdom/create-functional-component"import { version } from "v3"

四次跳转

我感觉下面就是见证奇迹的时刻了，来吧！根据import Vue from "./instance/index"的引用，跳转到./instance/index.ts

import { initMixin } from "./init"import { stateMixin } from "./state"import { renderMixin } from "./render"import { eventsMixin } from "./events"import { lifecycleMixin } from "./lifecycle"import { warn } from "../util/index"import type { GlobalAPI } from "types/global-api"function Vue(options) {  if (__DEV__ && !(this instanceof Vue)) {    warn("Vue is a constructor and should be called with the `new` keyword")  }  this._init(options)}//@ts-expect-error Vue has function type//初始化混入 | _initinitMixin(Vue)//@ts-expect-error Vue has function type// 状态混入 | $set，$delete，$watchstateMixin(Vue)//@ts-expect-error Vue has function type// 事件混入 | $on $once $off $emiteventsMixin(Vue)//@ts-expect-error Vue has function type// 生命周期混入 | _update $forceUpdate $destroylifecycleMixin(Vue)//@ts-expect-error Vue has function type// 渲染混入 | $nextTick，_renderrenderMixin(Vue)export default Vue as unknown as GlobalAPI

经过了四次的跳转，我们终于到达了传说中的隐秘之地，首先判断如果是开发环境，且不是通过 new 关键字来进行调用的话，就会在控制台打印一个 warning，之后调用了 this._init(options)函数。

关键词：