Vue2项目配置flow类型检查

发表于 | 评论数： | 阅读次数：

Flow 是 JavaScript 代码的静态类型检查器。它做了很多工作来提高你的工作效率。使您编码更快、更智能、更自信，并且规模更大。

Flow 通过静态类型注解检查你的代码是否有错误。这些 类型允许您告诉 Flow 您希望您的代码如何工作，Flow 将确保它确实以这种方式工作。

Vue2的源代码就使用了Flow进行静态类型检查。下面介绍在Vue2项目中安装配置使用Flow的方法。

安装步骤

  • Babel是一个支持 Flow 的 JavaScript 代码编译器。Babel 将获取您的 Flow 代码并删除所有类型注释。
1
npm install --save-dev @babel/core @babel/cli @babel/preset-flow

接下来，您需要在项目的根目录下创建一个文件，即.babelrc， 并将”@babel/preset-flow”配置在您的”presets”.

1
{ "presets": ["@babel/preset-flow"] }
  • flow可以直接通过npm或者yarn安装。
1
npm install --save-dev flow-bin

安装完成后在package.json中加入下面的脚本:

1
2
3
"scripts": {
  "flow":"flow check"
}

使用方法

配置flow

首先生成flow配置文件.flowconfig：

1
.\node_modules\.bin\flow init

使用flow

新建一个文件index.js：

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

// @flow或者 /* @flow */告诉flow检查这个文件
输入npm run flow 执行类型检查

注：在vue单文件组件使用flow需要额外配置

注：项目路径不能存在中文

请参考vue2.0项目配置flow类型检查。

参考链接

  1. vue2.0项目配置flow类型检查,by ltinyho.
  2. Flow静态类型检查及在Vue项目中的使用,by 美团点评点餐.
  3. .flowconfig,by flow.org.
  4. flow高级配置,by zhenyong.
  5. flow从零开始—-安装和配置,by advance100.
  6. npm发布以@开头命名的public包！！！,by ty41232X32.