vue源码（1）

flow:

vue.js源码目录设计

javascript通常写es6，es6用babel编译

类型检查：编译期检查，运行不检查

之所以yongflow，因为babel和eslint都有对应的
flow插件以支持语法，可以沿用现有的构建配置，
非常小成本的改动就可以拥有静态类型检查的能力

flow工作方式：
类型检查分2种，
类型推断：通过变量的使用上下文推断出变量类型，
根据这些推断来检查类型
类型注释：事先注释好我们期待类型，flow会基于这些
注释来判断

》npm install -g flow-bin
>flow init    //创建flowconfig文件


给类型打上标记
function add(x:number, y:number): number{
  return x+y
}
add(12, 11)

在一个文件中出现/*@flow/才说明需要flow检查，
否则会跳过
var arr:Array<numer>=[1,2,3] 
//定义了一个 数字数组

arr.push('Hello')

constructor(x:string, y:string|number){
  
}
只传一个参数

class Bar{
  x:string;       //x是字符串
  y:string|number|void;
  z:boolean;
constructor(x:string, y:string|number|void){
  this.x=x
  this.y=y
  this.z=false
}  
}

var bar:Bar=new Bar('hello')
……

Null
若想任意类型t可以为null 或者 undefined，
只需写成?T的格式

/*@flow/
var foo: ?string=null
foo可以是字符串，也可以是null

检测第三方定义的类型：
flow提出一个libdef，可以识别第三方库或是
自定义类型

（虚拟node|void&null|typecript）

vue2.0目录结构：
compiler编译
core核心
server=》render核心
sfc  简单的解释器
shared  一些辅助的方法（一些常量、工具方法）


vuejs源码构建
基于 rollup
rollup  和 webpack都是构建工具
rollup更适合javascript库的编译

package.json  做描述
'main'  npm包的一个入口
'module'和'main' 非常类似，webpack2以上，
把module作为默认入口  .esm.js

"scripts":{
  
}
定义了很多脚本，每个脚本都是一个任务，通过
npm run执行不同的任务

源码托管在src目录下，通过构建生成的目标代码
生在dist


//scripts\build.js
let builds=require('./config').getAllBuilds()
//拿到所有的builds,之后做一层过滤，最终调用build函数，做真正的构建过程
build(builds)

//scripts\config.js
export.getAllBuild=()=>

const builds={
  entry：入口  通过resolve函数传递一个字符串
  dest：目标
}
//编译配置

//scripts\alias.js
  alias.js    提供真正地址的一个映射关系
const resolve=p => path.resolve(__dirname, '../', p) 
path.resolve   node.js提供的路径解析的一个方法
__dirname    当前的一个目录
alias
resolve 返回一个字符串flow:

vue.js源码目录设计

javascript通常写es6，es6用babel编译

类型检查：编译期检查，运行不检查

之所以yongflow，因为babel和eslint都有对应的
flow插件以支持语法，可以沿用现有的构建配置，
非常小成本的改动就可以拥有静态类型检查的能力

flow工作方式：
类型检查分2种，
类型推断：通过变量的使用上下文推断出变量类型，
根据这些推断来检查类型
类型注释：事先注释好我们期待类型，flow会基于这些
注释来判断

》npm install -g flow-bin
>flow init    //创建flowconfig文件


给类型打上标记
function add(x:number, y:number): number{
  return x+y
}
add(12, 11)

在一个文件中出现/*@flow/才说明需要flow检查，
否则会跳过
var arr:Array<numer>=[1,2,3] 
//定义了一个 数字数组

arr.push('Hello')

constructor(x:string, y:string|number){
  
}
只传一个参数

class Bar{
  x:string;       //x是字符串
  y:string|number|void;
  z:boolean;
constructor(x:string, y:string|number|void){
  this.x=x
  this.y=y
  this.z=false
}  
}

var bar:Bar=new Bar('hello')
……

Null
若想任意类型t可以为null 或者 undefined，
只需写成?T的格式

/*@flow/
var foo: ?string=null
foo可以是字符串，也可以是null

检测第三方定义的类型：
flow提出一个libdef，可以识别第三方库或是
自定义类型

（虚拟node|void&null|typecript）

vue2.0目录结构：
compiler编译
core核心
server=》render核心
sfc  简单的解释器
shared  一些辅助的方法（一些常量、工具方法）


vuejs源码构建
基于 rollup
rollup  和 webpack都是构建工具
rollup更适合javascript库的编译

package.json  做描述
'main'  npm包的一个入口
'module'和'main' 非常类似，webpack2以上，
把module作为默认入口  .esm.js

"scripts":{
  
}
定义了很多脚本，每个脚本都是一个任务，通过
npm run执行不同的任务

源码托管在src目录下，通过构建生成的目标代码
生在dist


//scripts\build.js
let builds=require('./config').getAllBuilds()
//拿到所有的builds,之后做一层过滤，最终调用build函数，做真正的构建过程
build(builds)

//scripts\config.js
export.getAllBuild=()=>

const builds={
  entry：入口  通过resolve函数传递一个字符串
  dest：目标
}
//编译配置

//scripts\alias.js
  alias.js    提供真正地址的一个映射关系
const resolve=p => path.resolve(__dirname, '../', p) 
path.resolve   node.js提供的路径解析的一个方法
__dirname    当前的一个目录
alias
resolve 返回一个字符串