javascript - 如何使用 RequireJS 加载模块导入 Flow 的类型信息？

Question

我有一个大型 Web 项目，目前使用 RequireJS 进行开发中的模块加载和生产优化。在 Flow 之前，文件看起来像这样:

define(function(require) {
  const React = require('react');

  class Foo extends React.Component {
    // [...some component code]
  }

  return Foo;
});

我有兴趣将 Flow 添加到我的系统中。我已经或多或少地让它工作了，但我缺少一些关键功能，因为我无法让 Flow 相信我需要的模块是实际模块。

给定以下代码，我预计会出现类型错误，但只有当我将 import * as React from 'react' 添加到我的模块顶部时它才会起作用，从而允许流程识别React.Component 类型。但这与通过 RequireJS 加载模块不兼容。

我已经尝试为 define 创建各种定义，但我不知道如何告诉流程作为函数参数传递的 require 对象是“真正的”require。

示例代码:

// @flow
define(function(require) {
  const React = require('react');

  type Props = {
    foo: string
  }

  type State = {
    bar: string
  }

  class Foo extends React.Component<Props, State> {
    someMethod(): void {
      this.setState({
        bar: 1 // should trigger a type error
      });
    }

    // [...other component code]
  }

  return Foo
}

在我的 RequireJS 的 flow-typed 文件中:

declare function define(module: ((require: string) => any) => any): void;

Answer 1

Flow 只知道如何解析和遵循 CommonJS 和 ES6 模块文件中的类型。 https://github.com/facebook/flow/issues/28 中有一些 super hacky 基于评论的解决方案，但归根结底，它并不是为 AMD 设计的，因此您实质上是在注释中编写一段应用程序，以便让 Flow 将您的文件视为 CommonJS 而不是 AMD。

我知道 AMD 对您的工作流程很重要，所以对您的构建过程进行重大更改似乎是行不通的？鉴于此，我想到的唯一真正的选择是您将脚本更改为编写为 ES6 模块，然后编译为 AMD 模块以便稍后捆绑。例如，Babel 可以使用其 AMD 输出支持来做到这一点，然后这些 AMD 模块可以像往常一样捆绑起来。

无论您怎么看，这绝对是痛苦的，而且需要大量的工作。 AMD 在现代工具中并不常见，至少不是作为一种创作格式。