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

lavnFan 发布于2019-08-23 14:36 / 606人阅读

摘要：框架使用了作为类型检查，来保证项目的可读性和维护性。的主目录下有的配置文件，还有目录，指定了各种自定义类型。表示构建出来的文件遵循规范。

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.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)
}

混合云超融合服务器 java递归构建目录 java构建临时目录存储过程结构 vue源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100841.html

vue学习笔记（四）

摘要：提供了两种向组件传递参数的方式。子路由项路径不要使用开头，以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上，是通过不同的将这些资源加载后打包，然后输出打包后文件。一、vue-router 1、简介我们经常使用vue开发单页面应用程序（SPA）。在开发SPA过程中，路由是必不可少的部分，vue的官方推荐是vue-router。单页面应用程序看起来好像...

frank_fun 2019-08-21 17:16 评论0 收藏0
vue学习笔记（四）

摘要：提供了两种向组件传递参数的方式。子路由项路径不要使用开头，以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上，是通过不同的将这些资源加载后打包，然后输出打包后文件。一、vue-router 1、简介我们经常使用vue开发单页面应用程序（SPA）。在开发SPA过程中，路由是必不可少的部分，vue的官方推荐是vue-router。单页面应用程序看起来好像...

lwx12525 2019-08-01 17:50 评论0 收藏0
深入Vue.js从源码开始(一)

摘要：的源码利用了做了静态类型检查。它包括把模板解析成语法树，语法树优化，代码生成等功能。关于语法树的介绍可见一看就懂的抽象语法树目录包含了的核心代码，包括内置组件全局封装，实例化观察者虚拟工具函数等等。表示构建出来的文件遵循规范。本系列为慕课网《Vue.js 源码全方位深入解析》课程的学习笔记认识 Flow Flow 是 facebook 出品的 JavaScript 静态类型检查工具...

shery 2019-08-05 15:21 评论0 收藏0
Java学习路线总结，搬砖工逆袭Java架构师（全网最强）

摘要：哪吒社区技能树打卡打卡贴函数式接口简介领域优质创作者哪吒公众号作者架构师奋斗者扫描主页左侧二维码，加入群聊，一起学习一起进步欢迎点赞收藏留言前情提要无意间听到领导们的谈话，现在公司的现状是码农太多，但能独立带队的人太少，简而言之，不缺干 ? 哪吒社区Java技能树打卡【打卡贴 day2...

Scorpion 2021-11-18 10:02 评论0 收藏0
后端开发 - 收藏集 - 掘金

摘要：环境初始化开源一个的后台管理系统前端掘金实现代码自动部署后端掘金在我的中有两个关于代码自动部署的项目，一个是版本的，另外一个是版本的。 FFmpeg 总结（十二）用 ffmpeg 与 nginx 实现直播多路流并发播放 - Android - 掘金图：撒哈拉沙漠下载 nginx 和 nginx-rtmp源码： http://nginx.org/download/ngi... http...

neu 2019-07-16 16:26 评论0 收藏0