vue源码的构建过程

484 阅读1分钟

打开vue源码目录,找到src文件夹,打开目录如下:

各文件夹的意义

  • compiler:编译相关代码
  • core:vue的核心代码包括内置组件、全局API封装、vue实例化、观察者、虚拟DOM、工具函数等
  • platforms:与跨平台运行相关的代码。可以单独在web上运行,也可以配合weex在native客户端上运行
  • server:所有服务端渲染相关代码
  • sfc:当借助webpack等构建工具,通过.vue文件来编写组件时,这个文件夹下的代码会把.vue文件内容解析成一个JavaScript对象
  • shared:vue定义的一些工具方法都放在这个文件夹下

在web平台运行为例,通过从package.json里面的构建命令,反向依次找出构建过程中各个文件的依赖过程。

vueJS的构建命令在根目录下的package.json文件中scripts对象里配置如图:

运行npm run dev命令为例:找到根目录中scripts/config.js文件,后面大写的TARGET的属性值的意思是运行config.js中的web-full-dev的配置,在config.js文件中找到web-full-dev配置如图:

web-full-dev中的entry属性即为构建时的入口文件,即入口文件的路径是:platforms/web/entry-runtime-with-compiler.js。

打开这个文件,顶部引入core文件夹下的config.js文件,是vue在构建工具下开发项目时对外提供的一些全局配置接口。如图:

真正把主角vue的入口文件引入构建的是在scripts/config.js文件中,如图所示的位置:

图中第一行'./alias'对应的是与config.js同级的alias文件,alias文件是vue核心代码的一个中转文件。