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

栏目: IT技术 · 发布时间: 5年前

内容简介：初始化 npm，然后在本地安装 webpack 和 webpack-cli（此工具用于在命令行中运行 webpack）：新建一个 webpack 配置文件 webpack.config.js，如下：

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Learning Vue.js 2

Olga Filipova / Packt Publishing / 2017-1-5 / USD 41.99

About This Book Learn how to propagate DOM changes across the website without writing extensive jQuery callbacks code.Learn how to achieve reactivity and easily compose views with Vue.js and unders......一起来看看《Learning Vue.js 2》这本书的介绍吧!

码农工具