跳至主要内容

安装

设置编译器​

首先，您需要设置一个编译器来去除 Flow 类型。您可以选择 Babel 或 flow-remove-types。

Babel 是一个用于 JavaScript 代码的编译器，支持 Flow。Babel 将接收您的 Flow 代码并去除所有类型注释。如果您已经在项目中使用 Babel，请参阅 使用 Babel。

首先使用 Yarn 或 npm 安装 @babel/core、@babel/cli、@babel/preset-flow 和 babel-plugin-syntax-hermes-parser。

npm install --save-dev @babel/core @babel/cli @babel/preset-flow babel-plugin-syntax-hermes-parser

接下来，您需要在项目的根目录创建一个 .babelrc 文件，其中包含 @babel/preset-flow 预设和 babel-plugin-syntax-hermes-parser 插件。

{
  "presets": ["@babel/preset-flow"],
  "plugins": ["babel-plugin-syntax-hermes-parser"],
}

如果您将所有源文件放在 src 目录中，则可以通过运行以下命令将它们编译到另一个目录。

./node_modules/.bin/babel src/ -d lib/

您可以轻松地将此添加到您的 package.json 脚本中，与您在 Babel 上的 "devDependencies" 并列。

{
  "name": "my-project",
  "main": "lib/index.js",
  "scripts": {
    "build": "babel src/ -d lib/",
    "prepublish": "yarn run build"
  }
}

注意： 您可能希望添加一个 prepublish 脚本，该脚本也会运行此转换，以便在将代码发布到 npm 注册表之前运行。

设置 Flow​

Flow 最适合在每个项目中使用显式版本控制进行安装，而不是全局安装。

幸运的是，如果您已经熟悉 npm 或 yarn，这个过程应该很熟悉！

在 flow-bin npm 包上添加一个 devDependency​

npm install --save-dev flow-bin

在您的 package.json 中添加一个 "flow" 脚本​

{
  "name": "my-flow-project",
  "version": "1.0.0",
  "devDependencies": {
    "flow-bin": "^0.233.0"
  },
  "scripts": {
    "flow": "flow"
  }
}

运行 Flow​

第一次运行时，运行

npm run flow init
> [email protected] flow /Users/Projects/my-flow-project
> flow "init"

第一次使用 init 运行 flow 后，运行

npm run flow
> [email protected] flow /Users/Projects/my-flow-project
> flow

No errors!

设置 ESLint​

如果您使用 ESLint，您可以阅读 我们关于 ESLint 的页面，以将其设置为支持 Flow。