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

標籤：JavaScript

上一篇：JS變數型別和計算常見面試題分析

下一篇：【一統江湖的大前端（9）】TensorFlow.js 開箱即用的深度學習工具