reactjs - 当包含 Flow 注解的 React 应用程序启动时会发生什么？

Question

我对网络开发还比较陌生。我有一个 React 应用程序，它使用常用的 JSX 组件。这些被编译为常规 html 和 JavaScript，大概是通过我第一次运行 create-react-app MyApp 时创建的 React 脚本。

我的 package.json 文件包含以下内容:

"scripts": {
    "start": "react-scripts start",
    ...
}

然后我运行 npm start 来启动应用程序。

我最近一直在探索 flow静态分析工具，因为这似乎比旧的 React PropTypes 更受欢迎在 React 社区中。我看到 StackOverflow 问题暗示带有 Flow 注释的 JavaScript 代码不再是有效的 JavaScript，并且 answers也就是说，为了使用这样的 JavaScript，需要对其进行转译以删除 Flow 注释。 Flow 网站列出了 Babel 和 flow-remove-types 作为两个转译工具。

我的困惑是，我的项目工作正常，不需要我显式地转译代码。例如。 MyApp/src/index.js 中的以下 JavaScript 和 Flow 代码:

const someSillyConst: any = this;
console.log(`test: ${someSillyConst}`);

变成这样:

var someSillyConst = this;
console.log('test: ' + someSillyConst);

当我在 Chrome 的开发工具中检查名为 static/js/bundle.js 的文件时。

但我仍然可以在 Users/barry/MyApp/src/index.js 中查看原始版本，同样是在 Chrome 的开发工具中。

那么，我运行 npm start 和 Chrome 中删除无效 JavaScript(在本例中为 Flow 注释)的应用程序渲染之间发生了什么？

Answer 1

它起作用的原因是 – create-react-app 支持开箱即用的 flow，因为它使用 babel-preset-react，而后者又包含 babel-flow。

所以，你的代码实际上被转译了。您的情况下的转译还会将模板文字转换为普通的旧字符串连接(并将 const 转换为 var)。

预设 react :https://babeljs.io/docs/plugins/preset-react/babel-preset-react-app:https://github.com/facebookincubator/create-react-app/blob/master/packages/babel-preset-react-app/index.js

如果您想探索创建 react 应用程序隐藏的所有配置内容，您可以使用npmject - 尽管您可能想为另一个项目执行此操作，因为这是一种单向操作。此命令将复制所有配置文件供您编辑。