[Flow](https://github.com/facebook/flow/) 是 Facebook 出品的，針對 JavaScript 的靜態類型檢查工具。它可以幫助捕獲 JavaScript 開發中的常見錯誤，而不需要額外地修改原有的代碼，比如靜態類型轉換，空值引用等問題。同時，Flow 為... ...
Flow 是 Facebook 出品的，針對 JavaScript 的靜態類型檢查工具。它可以幫助捕獲 JavaScript 開發中的常見錯誤，而不需要額外地修改原有的代碼，比如靜態類型轉換，空值引用等問題。同時，Flow 為 JavaScript 添加了靜態類型的語法標識，這樣開發者便可以明確代碼中的類型，讓其自動地被 Flow 所維護。本文將詳細介紹使用 Webpack、ESlint、Babel 與 Flow 集成的開發環境的構建過程。
安裝 Webpack
初始化 npm，然後在本地安裝 webpack 和 webpack-cli（此工具用於在命令行中運行 webpack）：
npm install webpack webpack-cli --save-dev
新建一個 webpack 配置文件 webpack.config.js，如下：
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
配置 ES6 開發環境
使用 Babel 編譯器配置 es6 開發環境，使用 Babel 編譯器必須先安裝 @babel/core 和 @babel/preset-env 兩個模塊，其中 @babel/core 是 Babel 的核心存在，Babel 的核心 api 都在這個模塊裡面，比如：transform。而 @babel/preset-env 是一個智能預設，允許您使用最新的 JavaScript，而無需微觀管理您的目標環境需要哪些語法轉換（以及可選的瀏覽器polyfill）。因為這裡使用的打包工具是 Webpack，所以還需要安裝 babel-loader 插件。
npm install --save-dev babel-loader @babel/core @babel/preset-env
修改 webpack.config.js 文件，增加以下配置：
{
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
}
}
創建 .babelrc 文件：
{
"presets": [
"@babel/preset-env"
]
}
由於 babel 預設只轉換 ES6 新語法，不轉換新的 API，如：Set、Map、Promise等，所以需要安裝 @babel/polyfill 轉換新 API。安裝 @babel/plugin-transform-runtime 優化代碼，@babel/plugin-transform-runtime 是一個可以重覆使用 Babel 註入的幫助程式代碼來節省代碼的插件。
npm install --save-dev @babel/polyfill @babel/plugin-transform-runtime
修改 .babelrc 配置文件：
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage", // 在每個文件中使用polyfill時，為polyfill添加特定導入。利用捆綁器只載入一次相同的polyfill。
"modules": false // 啟用將ES6模塊語法轉換為其他模塊類型，設置為false不會轉換模塊。
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"helpers": false
}
]
]
}
其他配置項，如：瀏覽器相容性等，可按需求配置。
配置 ESlint 代碼格式檢查
安裝 ESlint 相關依賴：
npm install --save-dev eslint eslint-loader babel-eslint
修改 webpack.config.js 配置文件，添加 eslint-loader：
{
test: /\.js$/,
exclude: /node_modules/,
loader: ["babel-loader", "eslint-loader"]
}
新建 .eslintrc 配置文件，如下：
{
"parser": "babel-eslint",
"extends": "eslint:recommended",
"parserOptions": {
"env": {
"es6": true
}
}
}
配置 Flow 靜態類型檢查
安裝依賴：
npm install --save-dev flow-bin @babel/plugin-syntax-flow @babel/plugin-transform-flow-comments babel-plugin-transform-class-properties eslint-plugin-flowtype-errors
依賴解釋：
- flow-bin：Flow 的二進位包裝器—— JavaScript 的靜態類型檢查器
- @babel/plugin-syntax-flow：在 Babel 中增加了對 Flow 語法的支持
- @babel/plugin-transform-flow-comments：使用 Babel 進行編譯之前，從源文件中將 Flow 語法指令轉換為註釋代碼。
- babel-plugin-transform-class-properties：添加對類屬性和靜態方法的支持
- eslint-plugin-flowtype-errors：將 Flow 錯誤通過 ESlint 傳遞給編輯器的 eslint 插件（如果有的話）。
在 .eslintrc 配置文件中增加以下配置項：
{
"plugins": [
"flowtype-errors"
],
"rules": {
"flowtype-errors/show-errors": 2
}
}
修改 .babelrc 配置文件中的 plugins 配置項，如下：
{
"plugins": [
"babel-plugin-transform-class-properties",
"@babel/plugin-syntax-flow",
"@babel/plugin-transform-flow-comments",
[
"@babel/plugin-transform-runtime",
{
"helpers": false
}
]
]
}
註意插件順序。這與 Babel 預設和插件運行順序有關。
Babel 預設與插件運行順序：
- 插件在預設之前運行。
- 插件從第一至最後順序運行。
- 預設順序相反（從最後到第一）。
例如：
{
"plugins": ["transform-decorators-legacy", "transform-class-properties"]
}
先運行 transform-decorators-legacy 然後再運行 transform-class-properties。
重要的是要記住，對於預設，順序是相反的。下列：
{
"presets": ["es2015", "react", "stage-2"]
}
將按照以下順序運行：stage-2，react，然後 es2015。
執行以下命令：
flow init
該命令將創建一個 Flow 配置文件 .flowconfig 文件，該文件可以為空文件，但必須保證有這個文件。
在 src 目錄下新建一個 index.js 文件，編寫帶有 Flow 靜態類型檢查代碼：
/* @flow */
const x: number = 10
function square (x: number = 5): number {
return x * x
}
square()
square(x)
完整的配置文件
webpack.config.js 配置文件：
const path = require("path")
module.exports = {
mode: "none",
watch: true,
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.js$/,
include: /src/,
exclude: /node_modules/,
loader: ["babel-loader", "eslint-loader"]
},
],
},
};
.babelrc 配置文件：
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"modules": false
}
]
],
"plugins": [
"babel-plugin-transform-class-properties",
"@babel/plugin-syntax-flow",
"@babel/plugin-transform-flow-comments",
[
"@babel/plugin-transform-runtime",
{
"helpers": false
}
]
]
}
.eslintrc配置文件：
{
"parser": "babel-eslint",
"extends": ["eslint:recommended"],
"parserOptions": {
"env": {
"es6": true
}
},
"plugins": [
"flowtype-errors"
],
"rules": {
"flowtype-errors/show-errors": 2
}
}
項目 Github 地址：https://github.com/JofunLiang/flow-typecheck-example
