Question

我对网络开发比较陌生。我有一个使用通常的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的文件时。

然而，我仍然可以在Chrome浏览器的开发工具中查看Users/barry/MyApp/src/index.js中的原始版本。

那么，我在运行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 - 虽然你可能想为另一个项目执行此操作，因为这是单向操作。此命令将复制所有配置文件以供您编辑。

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

1 个答案: