Flow It is a static type checking tool for JavaScript produced by Facebook. It can help to catch common errors in JavaScript development without modifying the original code, such as static type conversion, null value reference and so on. At the same time, Flow adds a syntax identifier of static type to JavaScript, so that developers can define the type in the code and make it automatically maintained by Flow. This article will introduce the construction process of the development environment integrated with Webpack, ESlint, Babel and Flow in detail.

Install Webpack

Initialize npm, then install webback and webback cli locally (this tool is used to run webback on the command line):

npm install webpack webpack-cli --save-dev

Create a new webpack configuration file, webpack.config.js, as follows:

const path = require('path')

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

Configure ES6 development environment

To use the Babel compiler to configure the es6 development environment, you must first install @ babel/core and @ Babel / preset Env, where @ babel/core is the core of Babel, and the core api of Babel is in this module, such as transform. And @ Babel / preset env is an intelligent preset that allows you to use the latest JavaScript without having to micromanage which syntax transformations (and optional browser polyfill) your target environment needs. Because the packaging tool used here is Webpack, you also need to install the Babel loader plug-in.

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

Modify the webpack.config.js file to add the following configuration:

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

To create a. babelrc file:

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

Because Babel only converts ES6 new syntax by default and does not convert new APIs, such as Set, Map, Promise, etc., you need to install @ babel/polyfill to convert new APIs. Install @ Babel / plugin transform runtime to optimize code, @ Babel / plugin transform runtime is a plug-in that can reuse the helper code injected by Babel to save code.

npm install --save-dev @babel/polyfill @babel/plugin-transform-runtime

Modify the. babelrc configuration file:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage", // When using polyfill in each file, add a specific import for polyfill. Use the bundler to load the same polyfill only once.
        "modules": false // Enable the conversion of ES6 module syntax to other module types. Setting false does not convert modules.
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "helpers": false
      }
    ]
  ]
}

Other configuration items, such as browser compatibility, can be configured as required.

Configure ESlint code format check

Installation of ESlint depends on:

npm install --save-dev eslint eslint-loader babel-eslint

Modify the webpack.config.js configuration file and add the eslint loader:

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: ["babel-loader", "eslint-loader"]
}

Create a new. eslintrc configuration file as follows:

{
  "parser": "babel-eslint",
  "extends": "eslint:recommended",
  "parserOptions": {
    "env": {
      "es6": true
    }
  }
}

Configure Flow static type checking

Installation depends on:

npm install --save-dev flow-bin @babel/plugin-syntax-flow @babel/plugin-transform-flow-comments babel-plugin-transform-class-properties eslint-plugin-flowtype-errors

Dependency interpretation:

• flow-bin : binary wrapper for Flow -- static type checker for JavaScript
• @babel/plugin-syntax-flow : added support for Flow syntax in Babel
• @babel/plugin-transform-flow-comments : before compiling with Babel, convert Flow syntax instructions to comment code from the source file.
• babel-plugin-transform-class-properties : add support for class properties and static methods
• eslint-plugin-flowtype-errors : pass Flow errors through eslint to the editor's eslint plug-in, if any.

Add the following configuration items to the. eslintrc configuration file:

{
  "plugins": [
    "flowtype-errors"
  ],
  "rules": {
    "flowtype-errors/show-errors": 2
  }
}

Modify the plugins configuration item in the. babelrc configuration file as follows:

{
  "plugins": [
    "babel-plugin-transform-class-properties",
    "@babel/plugin-syntax-flow",
    "@babel/plugin-transform-flow-comments",
    [
      "@babel/plugin-transform-runtime",
      {
        "helpers": false
      }
    ]
  ]
}

Note the plug-in order. This is related to the Babel preset and plug-in run order.

Babel preset and plug-in running order:

• The plug-in runs before the preset.
• Plug ins run from first to last.
• The default order is reversed (from last to first).

For example:

{
  "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

Run transform decorators legacy before transform class properties.

It is important to remember that for presupposition, the order is the opposite. Following:

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

It will run in the following order: stage-2, react, and then es2015.

Execute the following command:

flow init

This command will create a Flow configuration file. flowconfig file, which can be empty, but must be guaranteed.

Create a new index.js file in the src directory, and write the Flow static type checking code:

/* @flow */
const x: number = 10

function square (x: number = 5): number {
  return x * x
}

square()
square(x)

Full profile

webpack.config.js configuration file:

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 configuration file:

{
  "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 configuration file:

{
  "parser": "babel-eslint",
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "env": {
      "es6": true
    }
  },
  "plugins": [
    "flowtype-errors"
  ],
  "rules": {
    "flowtype-errors/show-errors": 2
  }
}

Project Github address: https://github.com/JofunLiang/flow-typecheck-example