无痛接入flow.js
前言: 针对项目越来越大,js弱类型、动态类型捉襟见肘,导致项目维护成本越来越高,typeScript接入学习成本及vue兼容性等问题,考虑引入flow.js
优点:
静态类型检查,避免类型编码错误
不影响线上代码打包,对线上代码影响小
接入后可仅在需要的文件中使用
项目接入流程如下:
使用yarn、babel的方式,其他方式请参照:https://flow.org/en/docs/install/,安装如下依赖:
yarn add --dev @babel/preset-flow flow-bin flow-typed
2. 安装完成后在项目根文件初始化flow
yarn run flow
3. 在babel.config.js文件中添加:
presets: ['@babel/preset-flow']
4. 在.flowconfig配置文件中配置路径简写
eg:
[options]
module.name_mapper='^@/(.*)$' -> '<PROJECT_ROOT>/src/\1'
5. 配置eslint
yarn add eslint-plugin-flowtype
.eslintrc.js中添加
extends: [
'plugin:flowtype/recommended'
],
plugins: ['flowtype'],
在项目根目录.vscode下的setting.json配置:
"javascript.validate.enable": false // 清除只能在ts文件中编写静态类型语法的错误
6. 相关语法文档:
https://zhenyong.github.io/flowtype/docs/getting-started.html#_
https://segmentfault.com/a/1190000016396411