Vue.js源码解读前的准备工作

前言

Vue.js最终是导出给外部使用的。所以在源码中,我们需要先找到 "入口文件",它作为一个出发点,找到它之后可以看其他文件的实现。

怎么找"入口文件"呢?

  1. 将 vue.js(以 v.2.6.14,也是 2.6 版本的终结版)clone 到本地之后,在一级目录中有一个 .github 的文件夹,里面的有一个 CONTRIBUTING.md 文件,可以查看 常用的 NPM 脚本;

可以看到 vue.js 的构建命令是 npm run dev;

  1. 现在我们进入 package.json 文件,看scripts下的 dev 脚本,得知 vue.js是使用 rollup 打包的,脚本文件在 scripts/config.js 中,此时的 environment 为 TARGET:web-full-dev,先记住这个值,后面会用到;
  1. 现在进入到 scripts/config.js 文件,看代码最后(一般导出的代码是放在最后);
js 复制代码
if (process.env.TARGET) { // 这里的 process.env.TARGET 就是 刚刚的 web-full-dev(表示此时的环境)
  module.exports = genConfig(process.env.TARGET)
} else {
  exports.getBuild = genConfig
  exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
}
  1. 此时看到 genConfig函数,进入这个文件(这个函数也在此文件中定义);

可以看到,我们要找的就是 input(入口)对应的值,也就是截图里面的序号 2。要得到 2,首先需要知道 序号 1 中 builds在干嘛?

  1. 现在进入 builds对象(也在此文件中定义),我们知道 buildsname中,name === 'web-full-dev',所以找到builds对象中键为 'web-full-dev' 所对应的 value,并且找到 entry 属性。发现有一个 resolve方法;
  1. 进入到 resolve方法。其实就是获取入口文件路径的。具体细节现在不需要弄清楚,因为此时是为了找到入口的。只要知道这段代码的作用是获取路径: src/platforms/web/entry-runtime-with-compiler.js,因此找到了打包的开始文件。
  1. 进入 entry-runtime-with-compiler.js 文件,看到 import Vue from './runtime/index',根据 import 继续找定义 Vue 的文件;
  1. 进入到 ./runtime/index,发现 Vue 是从外层导进来的( import Vue from 'core/index');
  1. 进入到 core/index文件,继续进入 './instance/index' 文件;
  1. 好,入口找到了。下面才可以真正算看 Vue 源码。

总结

找到"入口文件"的过程,其实就是从 npm 脚本出发,然后通过一层一层的函数调用,字符串拼接,最后找到入口文件路径。这个过程中有实现这条主线路的细枝末节会干扰大家,暂时先不用管,知道它是干嘛的就行,具体可以后面感兴趣看。

相关推荐
疯华整猫6 小时前
我用 Trae 把 Android 内存账重算了一遍
android·性能优化·源码
10share6 小时前
基于大模型的 i18n 方案:把中文原文当 Key,轻松搞定多语言维护
前端·vue.js
啾咪orJIUMI11 小时前
Vue 3 + 高德地图封装实战:点位、区域、Loca 流光与 Vue 信息窗体
前端·vue.js
FRing0311 小时前
vue2干货总结8(路由模块封装、router-link、声明式导航、路由重定向、编程式导航)
开发语言·前端·vue.js·vue2
无懈可击12 小时前
Vue 可视化AI表单设计器 FcDesigner v3.6 版本发布,支持导出 SQL功能!
vue.js·开源·ai编程
徐小夕13 小时前
JitArchives,一款基于JitWord协同AI文档打造的企业级电子档案系统
前端·vue.js·github
头发还在的女程序员15 小时前
基于 Spring Boot + Vue 3 + uni-app 的灵活用工系统:四端架构与业务流程设计
vue.js·spring boot·uni-app·灵活用工·灵工系统
FRing031 天前
vue2干货总结7(自定义指令、插槽、单页应用程序、路由的使用(VueRouter))
开发语言·前端·vue.js·vue2
ruanno_top2 天前
点全选,已选的被清空了:Transfer 三态复选框的三个 bug
vue.js
时间的情敌2 天前
Cesium 加载 3D Tiles 倾斜摄影、压平、样式设置(Vue3 实战)
vue.js·3d·cesium