启动包含 Flow 注释的 React 应用程序时会发生什么？

Question

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

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

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

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

我最近一直在探索 flow 静态分析工具，因为它似乎在 React 社区中比旧的 React PropTypes 更受欢迎。我看到 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 支持开箱即用的流，因为它使用 babel-preset-react，而 babel-preset-react 又包含 babel-flow。

因此，您的代码实际上已被转译。在您的情况下，转换还将模板文字转换为普通的旧字符串连接（以及 const 到 var）。

预设反应：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

如果你想探索所有被 create react app 隐藏的配置内容，你可以使用npm eject——尽管你可能想为另一个项目这样做，因为这是一种单向操作。此命令将复制所有配置文件供您编辑。