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
