vue 源码学习(一) 目录结构和构建过程简介

Flow

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.resolvenode.js 提供的路径解析方法,可以看下官方文档了解下,主要是从右到左处理给定的路径序列,直到构造出绝对路径.

resolve(‘web/entry-runtime.js‘)作分析, baseweb , 找到 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)
}

原文地址:https://www.cnblogs.com/huangnuoen/p/10237124.html

时间: 2024-10-08 21:51:22

vue 源码学习(一) 目录结构和构建过程简介的相关文章

Vue源码学习(一)

Vue构建 在scripts/build.js 中,从配置文件scripts/config.js读取配置,再通过命令行参数对构建配置做过滤,这样就可以构建出不同用途(平台:web/weex)的 Vue.js 了. 在scripts/config.js通过resolve查找相关的打包文件. 把自定义的build对象专程rollup所规定的格式,用rollup进行打包. 大专栏  Vue源码学习(一)"headerlink" title="Vue在源码是什么?">

TimePicker源码学习-TimePicker的结构

虽然自己也看过很多的Android源码,也看过很多别人写的源码分析,但是总觉得写出来的东西并不能完全展现代码作者所写的东西或者自己看源码的思维过程.(无法用言语形容) 这篇文章对常用的时间选择器TimePicker源码的总结,我可能不会从头一步一步的分析源代码,仅是我看完后的总结,当然也从中学习并应用后才有的总结. spinner:  一.从TimePicker.java看起 1.TimePicker继承FrameLayout,表明TimePicker只是用于布局而不是具体的绘制,具体的绘制vi

【译】Vue源码学习(一):Vue对象构造函数

本系列文章详细深入Vue.js的源代码,以此来说明JavaScript的基本概念,尝试将这些概念分解到JavaScript初学者可以理解的水平.有关本系列的一些后续的计划和轨迹的更多信息,请参阅此文章.有关本系列的文章更新进度的信息,请关注我的Tweeter.本系列的文章目录,请查看该链接. Vue对象构造函数 Vue实例是深入了解Vue源代码的一个基本点.正如Vue官方文档所说那样,"每个Vue应用程序都是通过使用Vue函数创建一个新的Vue实例来开始的." 在Vue的源码中,一个新

Vue源码学习(六)之虚拟DOM——Vue中的DOM-Diff (上)

1. 前言 在上一篇文章介绍VNode的时候我们说了,VNode最大的用途就是在数据变化前后生成真实DOM对应的虚拟DOM节点,然后就可以对比新旧两份VNode,找出差异所在,然后更新有差异的DOM节点,最终达到以最少操作真实DOM更新视图的目的.而对比新旧两份VNode并找出差异的过程就是所谓的DOM-Diff过程.DOM-Diff算法时整个虚拟DOM的核心所在,那么接下来,我们就以源码出发,深入研究一下Vue中的DOM-Diff过程是怎样的. 2. patch 在Vue中,把 DOM-Dif

MySQL 5.7 源码中的目录结构

MySQl Server的源码可以直接去Github浏览. 这里我们选择5.7版本的:https://github.com/mysql/mysql-server/tree/5.7 也可以通过: git clone https://github.com/mysql/mysql-server.git 下载下来. 源码根目录中主要目录和文件的作用: BUILD:里面包含各个平台,各个编译器下进行编译的脚本: CMakeLists.txt:CMake入口编译文件: client:客户端工具,所有客户端工

Vue源码学习之数据初始化

首发地址:CJWbiu's Blog 在这里思考一个问题,使用Vue的时候需要在创建Vue实例时传入一个option,这里包含了我们定义的props.methods.data等.而在methods的方法中获取data中的key值都是直接通过this.key获取option对象中的methods中的定义的方法如何通过this访问到data中的数据呢? let vue = new Vue({ el: '#app', methods: { say() { console.log(this.msg) }

vue源码学习

1.vue.js响应式原理 参考:https://cn.vuejs.org/v2/guide/reactivity.html https://github.com/answershuto/learnVue 注:learnVue讲解的vue版本是2.3.0,我粘贴的源码是2.6.10 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新. 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 

vue源码分析之目录架构(一)

compiler compiler 目录包含 Vue.js 所有编译相关的代码.它包括把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能 core core 目录包含了 Vue.js 的核心代码,包括内置组件.全局 API 封装,Vue 实例化.观察者.虚拟 DOM.工具函数等等. platform Vue.js 是一个跨平台的 MVVM 框架,它可以跑在 web 上,也可以配合 weex 跑在 native 客户端上.platform 是 Vue.js 的入口,2 个目录代表 2

JDK1.8源码学习-ArrayList

JDK1.8源码学习-ArrayList 目录 一.ArrayList简介 为了弥补普通数组无法自动扩容的不足,Java提供了集合类,其中ArrayList对数组进行了封装,使其可以自动的扩容或缩小长度,相当于动态数组. ArrayList封装了一个动态的可以重新分配的Object[]数组,其中每一个类的对象都有一个capacity属性,表示了它们所封装的Object[]数组的长度,当向ArrayList中添加元素的时候,该属性会自动的添加.如果想要添加大量元素的时候,可以使用ensureCap