前言
按着我的习惯，拿到一个项目首先我会查看项目下的README.md其次查看package.json，这里也不例外看过 README.md 后，来看下package.json;
GitHub
github page
内容
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 = effect
export 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
//初始化混入 | _init
initMixin(Vue)
//@ts-expect-error Vue has function type
// 状态混入 | $set，$delete，$watch
stateMixin(Vue)
//@ts-expect-error Vue has function type
// 事件混入 | $on $once $off $emit
eventsMixin(Vue)
//@ts-expect-error Vue has function type
// 生命周期混入 | _update $forceUpdate $destroy
lifecycleMixin(Vue)
//@ts-expect-error Vue has function type
// 渲染混入 | $nextTick，_render
renderMixin(Vue)
export default Vue as unknown as GlobalAPI
经过了四次的跳转，我们终于到达了传说中的隐秘之地，首先判断如果是开发环境，且不是通过 new 关键字来进行调用的话，就会在控制台打印一个 warning，之后调用了 this._init(options)函数。
<iframe frameborder="0" id="embed_dom" name="embed_dom" src="https://www.processon.com/embed/640b393862ef7d4f6ef2ac96" style="display: block; width: 100%; height: 500px"></iframe> 标签：Vue,run,14,v2.7,resolve,test,import,compiler From： https://www.cnblogs.com/wangyang0210/p/17205024.html