Flow静態タイプ検査開発環境構築

FlowはFacebookの製品で、JavaScriptに対する静的なタイプの検査ツールです.これはJavaScriptの開発におけるよくあるエラーの獲得を助けることができます.既存のコードを追加的に修正する必要はなく、例えば、静的なタイプの変換、空の値の引用などの問題があります.同時に、FlowはJavaScriptに静的なタイプのシンタックスマークを追加しています.このように開発者はコードの種類を明確にして、Flowによって自動的に維持されます.本稿では、Webpack、ESlint、BabelとFlowを用いて集積された開発環境の構築過程を詳細に紹介する.
Webpackをインストールする
npmを初期化して、webpackとwebpack-cliをローカルにインストールします.

npm install webpack webpack-cli --save-dev

webpackの設定ファイルwebpack.co.fig.jsを新たに作成します.以下の通りです.

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

ES 6開発環境の設定
Babelコンパイラを使用して、環境を開発するには、Babelコンパイラを使用して@babel/coreと@babel/preset-envの二つのモジュールをインストールしなければなりません.ここで@babel/coreはBabelのコア存在です.Babelのコアapiはこのモジュールの中にあります.例えば、tranform.@babel/preset-envはスマートプロビジョニングで、最新のJavaScriptを使用することができます.目的環境をミクロ管理する必要なく、どのような文法変換が必要ですか?ここで使っている梱包ツールはWebpackですので、babel-loaderプラグインをインストールしなければなりません.

npm install --save-dev babel-loader @babel/core @babel/preset-env

webpack.co nfig.jsファイルを修正し、以下の構成を追加します.

{
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
}

作成.babelrcファイル:

{
  "presets": [
    "@babel/preset-env"
  ]
}

BabelはデフォルトではES 6の新しい文法だけを変換しますので、新しい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.co nfig.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を先に運行してからtranform-class-propertiesを実行します.
重要なのは、設定に対して順序が逆であることを覚えておくことです.以下のとおりです

{
  "presets": ["es2015", "react", "stage-2"]
}

以下の順序で運行します.stage-2、react、そしてes 2015.
以下のコマンドを実行します.

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.co.nfig.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