vue2.0项目设置flow范例搜检

2024年5月14日 145次阅读 来源: ltinyho

在vue2.0的项目中到场flow范例搜检。当前项目是用js写的，当项目愈来愈大，因为js弱范例的特征，比拟ts(typescript)这类强范例的言语而言，后期保护会愈来愈难题。为了处理这个题目，决议运用flow 到场范例搜检。

一、flow相识

flow是fackbook宣布的javascript静态范例搜检器。 能够搜检js中一些bug，eg：自动范例转换中涌现的题目。flow官网

援用flow官网的引见

flow is a static type checker for javascript

flow初体验

// @flow
let a:number = 2;
function foo(b:tring):boolean{
    return false;
}

运用bebel转换后

let a = 2;
function foo(b){
    return false;
}

从上面代码能够看出，运用flow后的代码更清楚清楚明了。虽然运用解释也能够完成，但运用解释太烦琐，而且不直观。

二、flow的装置

flow能够直接经由历程npm或许yarn装置。官网引荐装置体式格局

这里以npm为例

npm install –save-dev flow-bin

装置完成后在package.json中到场下面的剧本

"scripts": {
    "flow":"flow check"
  }

同时还要装置babel编译器，将flow的范例搜检代码从代码中剥离，转变成一般的js代码

npm install –save-dev babel-cli babel-preset-flow

在babel设置文件.babelrc中到场

{
  "presets": ["flow"]
}

三、flow运用

设置flow

我的设置文件

[ignore]
.*/node_modules/.*
.*/test/.*
.*/build/.*
.*/config/.*
[include]

[libs]

[options]
module.file_ext=.vue 
module.file_ext=.js

  • 2、新建一个文件index.js

// @flow 
let a:number = '3';

// @flow或许 /* @flow */通知flow搜检这个文件
输入npm run flow 实行范例搜检

注：在vue单文件组件运用flow须要分外设置

  • 1、在.flowconfig文件的[options]中设置.vue文件扩展名

module.file_ext=.vue 
/* @flow
<template>
  <div>
  </div>
</template>
*/
// <script>
  let a:string = 2;
  console.log(a);
  export  default {
    data(){
      return {
       
      }
    }
  }
// </script>
/*
<style scoped>
</style>
*/

注重：
1、 在解释template和style时运用/**/解释，在template和style内部不能再运用 /* */这类解释，这个不是flow不辨认，原本就不该改/**/中嵌套/**/,应该在/**/中采纳 // 解释作风
2、假如不想在.vue中运用解释的要领，能够在ide中装置flow，然则不能运用npm run flow来搜检了。

webstorm中设置flow

设置webstorm，使其支撑flow语法。官网ide设置

总结一下为3点：

  • 1、装置node包

  • 2、全局装置flow

  • 3、在框架设置中挑选JavaScript flow

以上是我在vue2.0项目装置flow的悉数历程。

参考文章：

    原文作者：ltinyho
    原文地址: https://segmentfault.com/a/1190000009162986
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞