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