首页 > 其他分享 >无痛接入flow.js

无痛接入flow.js

时间:2024-04-15 11:45:49浏览次数:27  
标签:接入 babel flow yarn js flowtype 无痛

前言: 针对项目越来越大,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

标签:接入,babel,flow,yarn,js,flowtype,无痛
From: https://www.cnblogs.com/liuyujian/p/18128326

相关文章

  • jsoncpp的基本操作
    基本概念: 2.jsoncpp的使用jsoncpp库中的类被定义到了一个Json命名空间中,建议在使用这个库的时候先声明这个命名空间: usingnamespaceJson;使用jsoncpp库解析json格式的数据,我们只需要掌握三个类:Value类:将json支持的数据类型进行了包装,最终得到一个Value类型FastWrite......
  • js获取时间差,返回格式为01天02小时03秒
    //获取时间差返回值格式:01天02小时30秒exportfunctioncaclulateDiffTime(start,end):string{start=newDate(start).getTime();end=newDate(end).getTime();letstaytimeGap=end-start;if(staytimeGap<0){staytimeGap=start-end;}i......
  • 如何用RunFlow提升你日常开发任务的效率
    效率工具RunFlow完全手册之开发者篇前面我们介绍了RunFlow的基础功能和进阶功能,本文是专为开发者准备的开发者篇手册,一起来看看有哪些实用的功能吧。执行命令输入>进入命令专注模式(支持历史记录,执行常用命令变得更快捷):计算器进制转换(二进制、八进制、十六进制分别以0b、0......
  • 30 天精通 RxJS (19):实践范例 - 简易 Auto Complete 实作
    今天我们要做一个RxJS的经典范例-自动完成(AutoComplete),自动完成在实务上的应用非常广泛,几乎随处可见这样的功能,只要是跟表单、搜寻相关的都会看到。虽然是个很常见的功能,但多数的工程师都只是直接套套件来完成,很少有人会自己从头到尾把完整的逻辑写一次。如果有自己......
  • 30 天精通 RxJS (18):可观察运算符 - switchMap, mergeMap, concatMap
    今天我们要讲三个非常重要的operators,这三个operators在很多的RxJS相关的library的使用示例上都会看到。很多初学者在使用这些library时,看到这三个operators很可能就放弃了,但其实如果有把这个系列的文章完整看过的话,现在应该就能很好接受跟理解。OperatorsconcatMapconcat......
  • js混淆简介
      JS混淆技术通过降低JS程序的可读性来对网站进行取证分析。JavaScript(JS)混淆在流行网站中非常普遍。最近的研究表明,Alexa前10万个网站中95.90%的网站至少包含一个混淆的JS程序,混淆的JS程序给各种任务带来了挑战。JS混淆技术通过降低JS程序的可读性来阻止对网站源......
  • 如何解决node.js运行mysql报错?
    首先检查mysql客户端的密码是否正确正确后提示我没有安装mysql模板 在文件目录终端下输入cnpminstall-gmysql进行安装这时候运行还是显示错误上网搜了一下说是登录数据库的客户端跟mysql8.0不兼容了,mysql8.0密码认证采用了新的密码格式[解决方法]打开命令管理器进入m......
  • React.js 网站开发:实现滚动加载动画
    React.js网站开发:实现滚动加载动画极客前端探索者前沿技术的探索者,编码艺术的实践者 最近在开发官网的过程中,涉及到UI动画的制作,其中滚动效果的使用比较频繁,特此整理一下,以便查询和温习。平滑向上过渡动画这种往下滚动过渡渐变显示的动画是最常......
  • protobuf 和 json 互转
    common.h#ifndefCOMMON_H#defineCOMMON_H#include"google/protobuf/message.h"#include"nlohmann/json.hpp"#include"google/protobuf/util/json_util.h"usinggoogle::protobuf::util::MessageToJsonString;usingnamespacego......
  • 如何使用groovy反序列化json
    使用Groovy反序列化JSON可以通过以下步骤实现:导入相关的Groovy库:在Groovy脚本或Groovy项目中,首先需要导入相关的Groovy库,以便使用JSON反序列化的功能。可以使用以下代码导入库:importgroovy.json.JsonSlurper复制创建JsonSlurper对象:JsonSlurper是Groovy提供的一个用于解......