babel6 babel7_当您已经准备好Babel时设置Flow

babel6 babel7

by Jamie Kyle

杰米·凯尔(Jamie Kyle)

当您已经准备好Babel时设置Flow (Setting up Flow when you’ve already got Babel in place)

Flow is a static type checker for JavaScript. It makes you more productive by providing feedback as you write code. Flow gives you warnings in real-time that point out when you’ve made a mistake. If you would like to know more, check out flowtype.org.

Flow是JavaScript的静态类型检查器。 通过在编写代码时提供反馈，使您的工作效率更高。 Flow会实时为您提供警告，指出您犯错的时间。 如果您想了解更多信息，请查看flowtype.org 。

Rather than trying to build it’s own entirely separate ecosystem, Flow hooks into the existing JavaScript ecosystem. Using Babel to compile your code is one of the easiest ways to integrate Flow into a project.

Flow并没有尝试构建它自己的完全独立的生态系统，而是将其钩接到现有JavaScript生态系统中。 使用Babel编译代码是将Flow集成到项目中的最简单方法之一。

After two years of hard work, Babel works pretty much everywhere, just take a look at the setup page with integrations for every build tool you can imagine.

经过两年的努力，Babel几乎可以在任何地方工作，只需看一下设置页面，其中包含您可以想象的每个构建工具的集成。

If you don’t have Babel set up yet, you can use that guide to get set up. You also might want to checkout my handbook on Babel.

如果尚未设置Babel，则可以使用该指南进行设置。 您可能还想查看我关于Babel的手册 。

在Babel上设置Flow (Setting up Flow on top of Babel)

Once you have Babel set up, it’s easy to get going with Flow. First lets install two dependencies:

一旦设置好Babel，就可以轻松使用Flow。 首先让我们安装两个依赖项：

$ npm install --save-dev babel-plugin-transform-flow-strip-types$ npm install --global flow-bin

The Babel plugin is there in order to strip Flow types away so that your program runs. flow-bin is how you use Flow from the command line.

Babel插件在那里是为了删除Flow类型，以便您的程序运行。 flow-bin是从命令行使用Flow的方式。

Next, let’s add the Babel plugin to your .babelrc (or where-ever you are configuring Babel with options):

接下来，让我们将Babel插件添加到您的.babelrc中 (或使用选项配置Babel的任何地方)：

{  presets: [...],  plugins: [..., "transform-flow-strip-types"]}

Note: I’m assuming you are using Babel 6 for this tutorial. It is recommended that you upgrade if you have not already.

注意：我假设您在本教程中使用Babel 6。 如果尚未升级，建议您进行升级 。

Finally we’ll run flow init in our directory, which will create a .flowconfig file that should look like this:

最后，我们将在目录中运行flow init ，这将创建一个.flowconfig文件，该文件应如下所示：

[ignore]

[include]

[libs]

[options]

Awesome! Now we have Flow all set up in your project. How about we start making it run on some files?

太棒了！ 现在，我们在您的项目中都设置了Flow。 我们如何开始使其在某些文件上运行呢？

使Flow运行 (Getting Flow running)

Flow is designed to be introduced to your repo incrementally. That means that you don’t have to add it to your whole codebase all at once. Instead, you can add it file-by-file as you go. Let’s start with something simple to get you going.

Flow旨在逐步引入您的仓库。 这意味着您不必一次将其添加到整个代码库中。 相反，您可以在运行时逐个文件添加它。 让我们从简单的事情入手。

First, try to find a file that doesn’t have a lot of complexity or external dependencies. Something with just a handful of plain functions to get started with.

首先，尝试查找没有太多复杂性或外部依赖性的文件。 只需少量的简单功能即可入门。

import {getNumberFromString} from "string-math-lib";

export function multiplyStrings(a, b) {  return getNumberFromString(a) * getNumberFromString(b);}

In order to get Flow running on this file, we need to add a “flow pragma” comment at the top like this:

为了使Flow在此文件上运行，我们需要在顶部添加“ flow pragma”注释，如下所示：

// @flow

import {getNumberFromString} from "string-math-lib";

export function multiplyStrings(a, b) {  return getNumberFromString(a) * getNumberFromString(b);}

This little comment at the top of the file tells Flow “Okay, I want you to type-check this file”.

文件顶部的小注释告诉Flow：“好吧，我要您对该文件进行类型检查”。

Now we need to actually run Flow for the first time. In order to do that, you’ll need to switch back to your terminal and run the following command:

现在我们需要第一次实际运行Flow。 为此，您需要切换回终端并运行以下命令：

$ flow

Note: This command is an alias of flow status.

注意：此命令是流状态的别名。

What this command does is start up a Flow server and asks it for the “status” of your repo, which will most likely return some errors for you to fix.

该命令的作用是启动Flow服务器，并要求其提供存储库的“状态”，这很可能会返回一些错误供您修复。

The most common errors that you’re gonna see in a new file are:

您将在新文件中看到的最常见错误是：

• “Missing annotation”
  “缺少注释”
• “Required module not found”
  “找不到所需的模块”

These errors are related to imports and exports. The reason they come up is a result of how Flow works. In order to check types across files, Flow looks directly at the imports and exports of each file.

这些错误与进口和出口有关。 它们出现的原因是Flow如何工作的结果。 为了检查跨文件的类型，Flow直接查看每个文件的导入和导出。

“缺少注释” (“Missing annotation”)

You’ll see an error like this from Flow because it relates somehow to an export of your file. Other than that Flow won’t complain about missing type annotations.

您会在Flow中看到这样的错误，因为它某种程度上与文件的导出有关。 除此之外，Flow不会抱怨缺少类型注释。

So in order to fix that, we can start adding some types to your file. For a detailed guide on how to do that see the user guide. What you should end up is with some types like this:

因此，为了解决此问题，我们可以开始向您的文件添加一些类型。 有关如何执行此操作的详细指南， 请参阅用户指南 。 您最终应该使用的是以下某些类型：

import {getNumberFromString} from "string-math-lib";

export function multiplyStrings(a: string, b: string): number {  return getNumberFromString(a) * getNumberFromString(b);}

Keep running flow as you add your types to see the effects of what you are doing. Eventually you should be able to clear out all the “Missing annotation” errors.

添加类型时，请保持运行顺畅 ，以查看所做操作的效果。 最终，您应该能够清除所有“缺少注释”错误。

“找不到所需的模块” (“Required module not found”)

You’ll get these errors whenever you an import/require that can’t be resolved using Node’s normal module algorithm or if you have ignored it with your .flowconfig.

只要导入/请求无法使用Node的常规模块算法解决，或者使用.flowconfig忽略了导入/请求，就会出现这些错误。

This can be caused by a lot of things, maybe you’re using a special webpack resolver, maybe you forgot to install something. Whatever the reason, Flow needs to be able to find the module you are importing to do its job correctly. You have a couple options on how to solve this:

这可能是由很多原因引起的，也许您正在使用特殊的Webpack解析器，或者您忘记安装某些东西。 无论出于何种原因，Flow都必须能够找到您要导入的模块才能正确执行其工作。 您有几种解决方法：

1. module.name_mapper — specify a regular expression to match against module names, and a replacement pattern.

   module.name_mapper —指定一个正则表达式以与模块名称匹配，以及一个替换模式。

2. Create a library definition for the missing module
   为缺少的模块创建库定义

We’ll focus on creating a library definition for the module, if you need to use module.name_mapper you can see more about it in the documentation.

我们将专注于为模块创建库定义，如果您需要使用module.name_mapper ，则可以在文档中找到有关它的更多信息。

创建库定义 (Creating a library definition)

Having library definitions is useful for giving types to the packages you have installed that don’t have types. Let’s set one up for our string-math-lib library from the previous example.

具有库定义对于为已安装的没有类型的软件包提供类型很有用。 让我们为上一个示例中的string-math-lib库设置一个。

First create a flow-typed directory in your root directory (the directory where you put your .flowconfig).

首先，在根目录(放置.flowconfig的目录)中创建一个流类型的目录。

You can use other directory names using the [lib] section of your .flowconfig. However, using flow-typed will work out of the box.

您可以使用.flowconfig的[lib]部分使用其他目录名称。 但是，使用流类型将立即可用。

Now we’ll create a flow-typed/string-math-lib.js file to hold our “libdef” and start it off like this:

现在，我们将创建一个流类型的/string-math-lib.js文件来保存我们的“ libdef”并像这样启动它：

declare module "string-math-lib" {  // ...}

Next we just need to write definitions for exports of that module.

接下来，我们只需要为该模块的导出编写定义。

declare module "string-math-lib" {  declare function getNumberFromString(str: string): number}

Note: If you need to document the “default” or primary export, you can do that with declare module.exports: or declare export default

注意：如果需要记录“默认”或主导出 ，则可以使用clarify module.exports：或声明默认导出

There’s a lot more to library definitions so you should read through the documentation and read this blog post on how to create high-quality libdefs.

库定义还有很多，因此您应该通读文档，并阅读有关如何创建高质量libdefs的博客文章 。

从流类型安装libdef (Installing a libdef from flow-typed)

Because libdefs can consume a lot of time, we maintain an official repository of high-quality libdefs for all sorts of packages called flow-typed.

因为libdefs会花费很多时间，所以我们维护一个高质量libdefs的官方存储库，用于存放称为flow-typed的各种软件包。

To get started with flow-typed, install the command line interface (CLI) globally:

要开始使用流类型，请全局安装命令行界面(CLI)：

$ npm install --global flow-typed

Now you can look within flow-typed/definitions/npm to see if there’s an existing libdef for a package you want to use, if there is you can install it like this:

现在您可以在流类型/定义/ npm中查看 查看是否有要使用的软件包的现有libdef，如果有，可以这样安装：

$ flow-typed install chalk@1.0.0 --flowVersion 0.30

This tells flow-typed that you want to install the chalk package at the 1.0.0 version when you are running Flow 0.30.

这告诉Flow-typed您要在运行Flow 0.30时安装1.0.0版本的粉笔包。

The flow-typed CLI is still in beta and there is a lot of improvements planned for it, so expect this to improve a lot in the near future.

流类型的 CLI仍处于beta中，并且计划对其进行很多改进，因此希望在不久的将来会有所改进。

Be sure to contribute back to the flow-typed libdefs. It’s a community effort, and the more people that contribute, the better it gets.

确保对流类型的libdefs有所贡献。 这是社区的努力，贡献的人越多，收益越好。

您可能会遇到的其他错误： (Other errors you might run into:)

Hopefully, we’ve covered just about everything that you will run into while getting started with Flow. However, you also might run into some errors like this:

希望我们已经介绍了Flow入门时您将遇到的所有内容。 但是，您也可能会遇到类似以下的错误：

• Package inside of node_modules is reporting errors

  node_modules内部的软件包报告错误

• Reading node_modules is taking a really long time

  读取node_modules花费很长时间

• Malformed JSON inside node_modules is causing errors

  node_modules内部的JSON格式错误导致错误

There’s a handful of reasons for these types of errors that I won’t get into in this post (I’m working on detailed documentation for each individual error). For now, in order to keep yourself moving, you can just [ignore] the files that are causing these errors.

这些错误类型有很多原因，我在本文中不会涉及(我正在为每个错误编写详细的文档)。 现在，为了让自己动起来，您可以[忽略]导致这些错误的文件。

This means adding file paths to your [ignore] section in your .flowconfig like this:

这意味着将文件路径添加到.flowconfig中的 [ignore]部分，如下所示：

[ignore]./node_modules/package-name/*./node_modules/other-package/tests/*.json

[include]

[libs]

[options]

There is generally better options than this, but this should give you a good place to start.

通常有比这更好的选择，但这应该为您提供一个良好的起点。

For some examples of how to better handle errors within node_modules see this Stack Overflow answer about fbjs.

有关如何更好地处理node_modules中的错误的一些示例，请参见有关fbjs的Stack Overflow答案 。

专家提示：查看您的健康状况如何 (Pro tip: Checking to see how well you’re covered)

If you’re ever wondering how well a file is covered by Flow, you can use the following command to see a coverage report:

如果您想了解Flow对文件的覆盖程度，可以使用以下命令查看覆盖率报告：

$ flow coverage path/to/file.js --color

其他资源和支持 (Additional Resources and Support)

There’s lots that was not covered by this article. So here are some links to resources that can help you out.

本文没有涉及很多内容。 因此，这里有一些可以帮助您的资源链接。

• Flow Website

  流网站

• Try Flow Online

  在线试用Flow

• Flow GitHub

  流GitHub

• Stack Overflow #flowtyped

  堆栈溢出#flowtyped

The Flow team is committed to making sure that everyone has an excellent experience using Flow. If that is ever not true, we’d love to hear from you about how to improve.

Flow团队致力于确保每个人在使用Flow方面都有出色的经验。 如果那不是真的，我们很乐意听取您关于如何改进的信息。

Follow James Kyle on twitter. Follow Flow on twitter too.

在Twitter上关注James Kyle 。 在Twitter上也关注Flow 。

翻译自: https://www.freecodecamp.org/news/using-flow-with-babel-c04fdca8d14d/

babel6 babel7