一、前言
虽然 Vue3 已经公开了代码,但是Vue3.0还处于开发阶段，直接上手使用Typescript是不合适的 , 对于前端的老手是不错的选择, 但是如果没有研究源码经验的开发者还是建议使用完善, 成熟的源码进行入手. 而 Vue 2.x 中使用的 flow 是一个类型的校验工具, 可以简单的认为他是一个静态分析工具, 或编译检查工具. 而且非破坏式的引入, 完全可以作为我们一般开发任务的工具进行引入. 所以我们要简单介绍一下 flow 的使用, 一方面可以提升平时开发效率, 另一方面为了看明白 Vue 的源码也很有必要. 另外构建工具使用 Rollup, 因为 Vue 就是用的它, 简单明了, 比起 Webpack 没它强大, 但是够简单。
二、flow
这里推荐一下flow的官方地址，如果本章节有不够完善的地方，可以去官方进行详细的学习。https://flow.org/。
flow本身只是一个静态的语法检查工具
优势：
1、 足够简单，合适使用
2、 可以为已有的项目，进行优化
3、 为typescript做一个铺垫
准备使用：
用法：
1、 使用命令行工具
a. 编写代码，执行命令检查如果有问题则提示，没问题跳过（和传统编译型语言 非常相似）
2、 使用IDE插件（推荐）
a. 也和现在编译语言一样，我们在编写完代码之后，错误信息IDE工具会给你提示出来（所见即所得）安装的内容
1、 flow-bin它就是flow的静态类型检查工具（主程序）。
2、 编译器（compiler），例如flow-remove-types，将类型的语法结构删除掉，还原成纯js的文件。
安装
1、 全局安装npm install --g flow-bind 项目目录安装npm install -D flow-bind
2、 npm init -y（-y默认全部yes快捷创建）创建package.json文件，在文件中的scripts中添加：
使用命令
npm run flow init 在项目文件夹的根目录创建一个.flowconfig文件
npm run flow check 对所有文件夹进行类型检查
npm run flow 启动Flow服务(只检查变化部分)
flow 执行Flow检查
npm run flow stop 停止Flow服务
在被检查的文件最顶部添加 @flow 标识的注释对该文件进行检查
flow 命令行工具的用法
首先需要安装软件
$ npm i flow-bin flow-remove-types
编写代码
代码中添加 一个 注释 // @flow 或者 /* @flow */
在运行 flow 之前, 使用 npx flow init 初始化
检查代码
$ npx flow
注意: npx 是 node 工具, 是为了使用项目文件夹下 node_modules 中的可执行程序的工具
flow-remove-types
将代码转换为纯 js 的代码
npx flow-remove-types 源文件 -d 生成的文件
一般会将该命令配置 到 package.json 文件中
使用 IDE 插件
补充一下: 第一次打开 flow 代码的时候, VS CODE 会下滑红色波浪线
推荐使用 flow language support 这个插件 ( VS Code 编辑器 )
Vue 源码说明
.flowconfig 中
module.name_mapper='^sfc/(.*)$' -> '<PROJECT_ROOT>/src/sfc/\1' 的含义是将 代码中 from 后面导入模块使
用的路径 sfc/xxx/aa 映射到 项目根目录/src/sfc/xxx/aa
二、rollup的基本用法
官方地址：https://www.rollupjs.com/
Rollup是一个javascript模块打包器，可以将小块代码编译成大块复杂的代码，例如library或应用程序。Rollup对代码模块使用新的准备化格式（es6模块语法）
注意:
a. 版本, 生成文件的版本
b. 使用模块化的语法是 ES6 语法 ( http://es6.ruanyifeng.com/#docs/module )
使用
c. 安装 ( 局部 安装 )
d. rollup 源文件的路径 --file 生成文件的路径 --format umd --name 生成的库的名字
三、总结
webpack诞生的时候，为了解决css、图片等静态文件的构建和使得代码能够按需加载实现了code-splitting，在我们日常线上业务代码开发中，或多或少有一些静态资源需要打包，此时rollup显得不太适用。所以我们可以看到，在构建一些lib的时候可以选择rollup,而在构建一些应用的时候，选择webpack
