flowjs 的 配置

無樣發表於2019-05-04
JS

flowjs

[toc]

flowjs 有兩種使用方式對檔案進行靜態檢測：

  • 第一種，flow check 執行指令碼對檔案檢測，一次性。
  • 第二種，啟動 flow server，（容易佔一個程式，且在 window 的程式不太容易殺死），另外也應為版本的迭代的問題，不建議全域性安裝，儘量使用區域性安裝。

安裝 flow-bin 和 生成初始化配置檔案 .flowconfig

1. 安裝 flow-bin

npm i -D flow-bin
複製程式碼

2. 生成配置檔案 .flowconfig

./node_module/.bin/flow init
複製程式碼

.flowconfig 配置說明

這裡有一個坑，.flowconfig 配置錯誤，會導致flow server 跑不起來，並且錯誤提示語，目前是不太友好

額外的知識點

檢視全域性安裝的npm包

npm list -g --depth 0
複製程式碼

3. flow 的語法

檔案開頭加註釋 /* @flow */ 基本就可以，當強型別使用，至於語法略過

flow 與 vscode 的配置

首先關閉在工作區配置設定（記住不是使用者配置）

{
  "javascript.validate.enable": false,
  "typescript.validate.enable": false,
}
複製程式碼

安裝 flow language support 或 vscode-flow-idea

flow 與 eslint格式規範

參考地址

主要使用的外掛是 eslint-plugin-flowtype。

推薦配置地址

flow 與 webpack 的 bable-loader 的配置

參考地址

  1. 編譯主要 babel-loader 兩個外掛，分別是 @babel/plugin-transform-flow-strip-types 和 @babel/plugin-syntax-flow (這個外掛官王沒有說明)，其中， 我使用哦@bable/preset-flow來替代@babel/plugin-transform-flow-strip-types，前者包含後者。

  2. 型別錯誤提示是webpack 的外掛 flow-babel-webpack-plugin

修改 .babelrc

{
  "plugins": [
      "transform-flow-comments"
  ]
}
複製程式碼

修改 webpack.config.js

const FlowBabelWebpackPlugin = require('flow-babel-webpack-plugin')
module.exports = {
  plugins: [
      new FlowBabelWebpackPlugin()
  ]
}
複製程式碼

原始碼地址

相關文章