44

Flow 静态类型检查开发环境搭建

 4 years ago
source link: https://wanshi.netlify.app/2020/04/17/2020-04-18-flow 静态类型检查开发环境搭建
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

依赖解释：

在 .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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK