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

Question

我是网络开发的新手。我有一个使用常用 JSX 组件的 React 应用程序。这些被编译为常规 html 和 JavaScript，大概是在我第一次运行 create-react-app MyApp.

时创建的反应脚本

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

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

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

我最近一直在探索 flow static analysis tool, as this seems to be gaining ground over the older React PropTypes in the React community. I have seen Whosebug questions alluding to the fact that JavaScript code with Flow annotations is no longer valid JavaScript and answers 说要使用这样的 JavaScript 需要 t运行spiled 以删除 Flow 注释。 Flow 网站将 Babel 和 flow-remove-types 列为两个 t运行spile 工具。

我的困惑是，我的项目在没有我明确地 t运行spiling 代码的情况下工作正常。例如。以下 JavaScript 和 MyApp/src/index.js 中的流程代码：

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 的开发工具中。

那么，我运行ning npm start 和 Chrome 中的应用程序渲染之间发生了什么，删除了无效的 JavaScript，在这种情况下是 Flow 注释？

Answer 1

它起作用的原因是——create-react-app 支持开箱即用的流程，因为它使用 babel-preset-react，后者又包含 babel -流.

因此，您的代码实际上已被转译。您的情况下的转译还将模板文字转换为普通的旧字符串连接（以及 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——尽管你可能想为另一个项目这样做，因为这是一种单向操作。此命令将复制所有配置文件供您编辑。

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

What happens when a React app, which contains Flow annotations, is launched?

transpiler

reactjs

flowtype