点击上方蓝色字关注我们~
一、前言
虽然 Vue3 已经公开了代码,但是Vue3.0还处于开发阶段，直接上手使用Typescript是不合适的 , 对于前端的老手是不错的选择, 但是如果没有研究源码经验的开发者还是建议使用完善, 成熟的源码进行入手. 而 Vue 2.x 中使用的 flow 是一个类型的校验工具, 可以简单的认为他是一个静态分析工具, 或编译检查工具.
而且非破坏式的引入, 完全可以作为我们一般开发任务的工具进行引入. 所以我们要简单介绍一下 flow 的使用, 一方面可以提升平时开发效率, 另一方面为了看明白 Vue 的源码也很有必要. 另外构建工具使用 Rollup, 因为 Vue 就是用的它, 简单明了, 比起 Webpack 没它强大, 但是够简单.
二、flow与rollup的基本用法
flow
这里推荐一下flow的官方地址，如果本章节有不够完善的地方，可以去官方进行详细的学习。
https://flow.org/
flo
w本身只是一个静态的语法检查工具
优势：
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 language support 这个插件 ( VS Code 编辑器 )
Vue 源码说明：
.flowconfig 中
module.name_mapper='^sfc/(.*)$' -> '/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.
往期回顾
程序员择业疑惑：前端要凉？学习Vue还有必要吗？
牢记！前端工作中遇到99%的工作，都不能靠跳槽解决
前端这道“常见又讨厌”的面试难题，要怎么答？
技术大佬都在用碎片时间学习Vue充电，你竟然还能坐得住？
前端年度跳槽技术要求：不懂Vue千万别轻举妄动！!
·END·
极光学苑带你飞向梦想的地方
微信号：极光训练营谢谢你的“在看” ❤
扫一扫
994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
