vue 源码学习(一) 目录结构和构建过程简介
栏目: JavaScript · 发布时间: 5年前
内容简介:vue框架使用了Flow作为类型检查,来保证项目的可读性和维护性。vue.js的主目录下有Flow的配置.flowconfig文件,还有flow目录,指定了各种自定义类型。在学习源码前可以先看下Flow的语法官方文档vue.js源码主要在src下
vue框架使用了Flow作为类型检查,来保证项目的可读性和维护性。vue.js的主目录下有Flow的配置.flowconfig文件,还有flow目录,指定了各种自定义类型。
在学习源码前可以先看下Flow的语法官方文档
目录结构
vue.js源码主要在src下
src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── server # 服务端渲染 ├── sfc # .vue 文件解析 ├── shared # 共享代码 复制代码
compiler
template的编译
core
core ├── components # 内置组件 ├── global-api # 全局 API 封装 ├── instance # Vue 实例化,生命周期 ├── observer # 观察者,响应式 ├── util # 工具函数 ├── vdom # virtual DOM 复制代码
platform
存放2个主要入口,分别打包运行在web和weex上的vue.js
server
支持了服务端渲染
sfc
把.vue文件内容解析成js对象
shared
存放共享方法
vue.js构建
vue
是基于 Rollup
构建的,类似于 webpack
首先来看下 package.json
文件,先看下 script
字段:
{ "script":{ "build": "node scripts/build.js", "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer", "build:weex": "npm run build -- weex", } } 复制代码
这3条都是构建vue的命令,后2条是根据需求添加对应环境参数。运行 npm run build
时会执行 node scripts/build.js
构建过程
构建过程比较复杂,这里会简化下构建过程,只分析主线流程
进入到 scripts/build.js
,
// 从配置文件读取配置,拿到所有构建的path let builds = require('./config').getAllBuilds() // 过滤builds build(builds) 复制代码
再看下配置文件 scripts.config.js
,
let builds= { 'web-runtime-esm': { entry: resolve('web/entry-runtime.js'), dest: resolve('dist/vue.runtime.esm.js'), format: 'es', banner }, } 复制代码
entry
属性表示构建的入口 JS 文件地址, dest
属性表示构建后的 JS 文件地址。 format
属性表示构建的格式, cjs
表示构建出来的文件遵循 CommonJS 规范, es
表示构建出来的文件遵循 ES Module
规范。 umd
表示构建出来的文件遵循 UMD
规范。
resolve
看下 resovle
方法的定义
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) } } 复制代码
用到了 path.resolve([... paths])
, path.resolve
是 node.js
提供的路径解析方法,可以看下官方文档了解下,主要是从右到左处理给定的路径序列,直到构造出绝对路径.
用 resolve('web/entry-runtime.js')
作分析, base
是 web
, 找到 aliases[base]
即真实路径 '../src/platforms/web'
,
entry: resolve('web/entry-runtime.js')
所以最终入口路径是 ../src/platforms/web/entry-runtime.js
,构建生成文件路径是 ../dist/vue.runtime.esm.js
genConfig()
输入builds前要先将builds转换成rollup打包所对应的配置结构
if (process.env.TARGET) { module.exports = genConfig(process.env.TARGET) } else { exports.getBuild = genConfig // 返回config组成的数组 exports.getAllBuilds = () => Object.keys(builds).map(genConfig) } 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Vue源码探究-构建版本的区别
- 深入 Vue - 源码目录及构建过程分析
- JStorm 源码解析:拓扑的构建和提交过程
- 深入剖析Vue源码 - 响应式系统构建(上)
- 从理解 Phoenix 索引源码开始,构建全文索引
- asp.net mvc构建自己的源码框架
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Creative Curve
Allen Gannett / Knopf Doubleday Publishing Group / 2018-6-12
Big data entrepreneur Allen Gannett overturns the mythology around creative genius, and reveals the science and secrets behind achieving breakout commercial success in any field. We have been s......一起来看看 《The Creative Curve》 这本书的介绍吧!