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

Posted 2023-03-24

【中文标题】启动包含 Flow 注释的 React 应用程序时会发生啥？

【英文标题】：What happens when a React app, which contains Flow annotations, is launched?启动包含 Flow 注释的 React 应用程序时会发生什么？

【发布时间】：2017-11-13 16:32:04

【问题描述】：

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

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

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

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

我最近一直在探索 flow 静态分析工具，因为它似乎在 React 社区中比旧的 React PropTypes 更受欢迎。我看到 *** 的问题暗示带有 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 注释）的应用程序渲染之间发生了什么？

【参考方案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——尽管你可能想为另一个项目这样做，因为这是一种单向操作。此命令将复制所有配置文件供您编辑。

【讨论】：

是 webpack 创建了 bundle.js 文件吗？

是的，你可以在这里找到产品配置：github.com/facebookincubator/create-react-app/blob/master/…

如果我可能会问 - 你很难掌握 create-react-app 的实际作用吗？我不确定是否有诸如“它用那个和那个做这个”之类的文章，我认为这对于刚开始使用整个 js 构建/工具链的人来说是有价值的

写一篇文章会非常有用，但可能很快就会过时！ :)