一、前言

虽然 Vue3 已经公开了代码,但是Vue3.0还处于开发阶段，直接上手使用Typescript是不合适的 , 对于前端的老手是不错的选择, 但是如果没有研究源码经验的开发者还是建议使用完善, 成熟的源码进行入手. 而 Vue 2.x 中使用的 flow 是一个类型的校验工具, 可以简单的认为他是一个静态分析工具, 或编译检查工具. 而且非破坏式的引入, 完全可以作为我们一般开发任务的工具进行引入. 所以我们要简单介绍一下 flow 的使用, 一方面可以提升平时开发效率, 另一方面为了看明白 Vue 的源码也很有必要. 另外构建工具使用 Rollup, 因为 Vue 就是用的它, 简单明了, 比起 Webpack 没它强大, 但是够简单.

二、flow与rollup的基本用法  

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-bind2.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 language support 这个插件 ( VS Code 编辑器 )Vue 源码说明：.flowconfig 中module.name_mapper='^sfc/(.*)$' -> '/src/sfc/\1' 的含义是将 代码中 from 后面导入模块使用的路径 sfc/xxx/aa 映射到 项目根目录/src/sfc/xxx/aarollup的基本用法官方地址：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.

往期回顾

程序员择业疑惑：前端要凉？学习Vue还有必要吗？

牢记！前端工作中遇到99%的工作，都不能靠跳槽解决

前端这道“常见又讨厌”的面试难题，要怎么答？

技术大佬都在用碎片时间学习Vue充电，你竟然还能坐得住？

前端年度跳槽技术要求：不懂Vue千万别轻举妄动！!

·END·

极光学苑

带你飞向梦想的地方

微信号：极光训练营

谢谢你的“在看” ❤