前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flow 静态类型检查开发环境搭建

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

作者头像
用户6167509
发布2020-04-21 10:54:55
1.1K0
发布2020-04-21 10:54:55
举报
文章被收录于专栏:一路向前端

Flow 是 Facebook 出品的,针对 JavaScript 的静态类型检查工具。它可以帮助捕获 JavaScript 开发中的常见错误,而不需要额外地修改原有的代码,比如静态类型转换,空值引用等问题。同时,Flow 为 JavaScript 添加了静态类型的语法标识,这样开发者便可以明确代码中的类型,让其自动地被 Flow 所维护。本文将详细介绍使用 Webpack、ESlint、Babel 与 Flow 集成的开发环境的构建过程。

安装 Webpack

初始化 npm,然后在本地安装 webpack 和 webpack-cli(此工具用于在命令行中运行 webpack):

代码语言:javascript
复制
npm install webpack webpack-cli --save-dev

新建一个 webpack 配置文件 webpack.config.js,如下:

代码语言:javascript
复制
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 插件。

代码语言:javascript
复制
npm install --save-dev babel-loader @babel/core @babel/preset-env

修改 webpack.config.js 文件,增加以下配置:

代码语言:javascript
复制
{
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
}

创建 .babelrc 文件:

代码语言:javascript
复制
{
  "presets": [
    "@babel/preset-env"
  ]
}

由于 babel 默认只转换 ES6 新语法,不转换新的 API,如:Set、Map、Promise等,所以需要安装 @babel/polyfill 转换新 API。安装 @babel/plugin-transform-runtime 优化代码,@babel/plugin-transform-runtime 是一个可以重复使用 Babel 注入的帮助程序代码来节省代码的插件。

代码语言:javascript
复制
npm install --save-dev @babel/polyfill @babel/plugin-transform-runtime

修改 .babelrc 配置文件:

代码语言:javascript
复制
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage", // 在每个文件中使用polyfill时,为polyfill添加特定导入。利用捆绑器只加载一次相同的polyfill。
        "modules": false // 启用将ES6模块语法转换为其他模块类型,设置为false不会转换模块。
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "helpers": false
      }
    ]
  ]
}

其他配置项,如:浏览器兼容性等,可按需求配置。

配置 ESlint 代码格式检查

安装 ESlint 相关依赖:

代码语言:javascript
复制
npm install --save-dev eslint eslint-loader babel-eslint

修改 webpack.config.js 配置文件,添加 eslint-loader:

代码语言:javascript
复制
{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: ["babel-loader", "eslint-loader"]
}

新建 .eslintrc 配置文件,如下:

代码语言:javascript
复制
{
  "parser": "babel-eslint",
  "extends": "eslint:recommended",
  "parserOptions": {
    "env": {
      "es6": true
    }
  }
}

配置 Flow 静态类型检查

安装依赖:

代码语言:javascript
复制
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 配置文件中增加以下配置项:

代码语言:javascript
复制
{
  "plugins": [
    "flowtype-errors"
  ],
  "rules": {
    "flowtype-errors/show-errors": 2
  }
}

修改 .babelrc 配置文件中的 plugins 配置项,如下:

代码语言:javascript
复制
{
  "plugins": [
    "babel-plugin-transform-class-properties",
    "@babel/plugin-syntax-flow",
    "@babel/plugin-transform-flow-comments",
    [
      "@babel/plugin-transform-runtime",
      {
        "helpers": false
      }
    ]
  ]
}

注意插件顺序。这与 Babel 预设和插件运行顺序有关。

Babel 预设与插件运行顺序:

  • 插件在预设之前运行。
  • 插件从第一至最后顺序运行。
  • 预设顺序相反(从最后到第一)。

例如:

代码语言:javascript
复制
{
  "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

先运行 transform-decorators-legacy 然后再运行 transform-class-properties。

重要的是要记住,对于预设,顺序是相反的。下列:

代码语言:javascript
复制
{
  "presets": ["es2015", "react", "stage-2"]
}

将按照以下顺序运行:stage-2,react,然后 es2015。

执行以下命令:

代码语言:javascript
复制
flow init

该命令将创建一个 Flow 配置文件 .flowconfig 文件,该文件可以为空文件,但必须保证有这个文件。

在 src 目录下新建一个 index.js 文件,编写带有 Flow 静态类型检查代码:

代码语言:javascript
复制
/* @flow */
const x: number = 10

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

square()
square(x)

完整的配置文件

webpack.config.js 配置文件:

代码语言:javascript
复制
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 配置文件:

代码语言:javascript
复制
{
  "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配置文件:

代码语言:javascript
复制
{
  "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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-04-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装 Webpack
  • 配置 ES6 开发环境
  • 配置 ESlint 代码格式检查
  • 配置 Flow 静态类型检查
  • 完整的配置文件
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档