摘要：框架使用了作为类型检查，来保证项目的可读性和维护性。的主目录下有的配置文件，还有目录，指定了各种自定义类型。表示构建出来的文件遵循规范。
Flow
vue框架使用了Flow作为类型检查，来保证项目的可读性和维护性。vue.js的主目录下有Flow的配置.flowconfig文件，还有flow目录，指定了各种自定义类型。
在学习源码前可以先看下Flow的语法 官方文档
目录结构vue.js源码主要在src下
src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── server # 服务端渲染 ├── sfc # .vue 文件解析 ├── shared # 共享代码compiler
template的编译
corecore ├── components # 内置组件 ├── global-api # 全局 API 封装 ├── instance # Vue 实例化，生命周期 ├── observer # 观察者，响应式 ├── util # 工具函数 ├── vdom # virtual DOMplatform
存放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)
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100841.html
摘要：提供了两种向组件传递参数的方式。子路由项路径不要使用开头，以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上，是通过不同的将这些资源加载后打包，然后输出打包后文件。 一、vue-router 1、简介 我们经常使用vue开发单页面应用程序（SPA）。在开发SPA过程中，路由是必不可少的部分，vue的官方推荐是vue-router。单页面应用程序看起来好像...
摘要：提供了两种向组件传递参数的方式。子路由项路径不要使用开头，以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上，是通过不同的将这些资源加载后打包，然后输出打包后文件。 一、vue-router 1、简介 我们经常使用vue开发单页面应用程序（SPA）。在开发SPA过程中，路由是必不可少的部分，vue的官方推荐是vue-router。单页面应用程序看起来好像...
摘要：哪吒社区技能树打卡打卡贴函数式接口简介领域优质创作者哪吒公众号作者架构师奋斗者扫描主页左侧二维码，加入群聊，一起学习一起进步欢迎点赞收藏留言前情提要无意间听到领导们的谈话，现在公司的现状是码农太多，但能独立带队的人太少，简而言之，不缺干 ? 哪吒社区Java技能树打卡 【打卡贴 day2...
阅读 1377·2021-09-24 10:26
阅读 1689·2019-08-30 14:14
阅读 2098·2019-08-29 16:54
阅读 362·2019-08-29 14:09
阅读 1467·2019-08-29 12:55
阅读 922·2019-08-28 18:13
阅读 1572·2019-08-26 13:39
阅读 2559·2019-08-26 11:43
