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.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)
}
复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

今日简史

今日简史

[以] 尤瓦尔·赫拉利 / 林俊宏 / 中信出版集团 / 2018-8 / 68

四年前,尤瓦尔•赫拉利的《人类简史》横空出世,颠覆了我们关于人类进化的认知。2016年,他的《未来简史》再度惊艳四座,刷新了我们对未来的想象,掀起了全球关于人工智能讨论的新思潮。现在,“简史三部曲”收官之作《今日简史》推出,将目光聚焦到当下,直面今天关乎我们每个人命运的问题和挑战。 尤瓦尔•赫拉利认为,智人之所以能够崛起成为地球的主宰者,主要原因在于其具备了虚构故事的能力。然而,在当前这样一......一起来看看 《今日简史》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

随机密码生成器
随机密码生成器

多种字符组合密码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具