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

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

查看所有标签

猜你喜欢:

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

The Creative Curve

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》 这本书的介绍吧!

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

RGB HEX 互转工具

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

多种字符组合密码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试