作者：Nathan Sebhastian; 本文翻译自：www.freecodecamp.org/news/create…
创建React应用程序需要您设置构建工具，如Babel和Webpack。这些构建工具是必需的，因为React的JSX语法是一种浏览器不理解的语言。
要运行您的React应用程序，您需要将JSX转换成浏览器理解的普通JavaScript。
Create React App（CRA）是一个创建单页React应用程序的工具，由React团队正式支持。
该脚本生成启动React应用程序并在浏览器上运行所需的文件和文件夹。这允许您专注于编码应用程序，而不必费心构建配置。
create-react-app 使用的依赖关系
尽管在生成的package.json文件中看不到Babel或Webpack作为依赖项列出，但CRA仍然在引擎盖下使用Babel和Webpack。只是这些配置隐藏在反应脚本包中。
当你查看package.json的反应脚本文件时，你会看到让反应在浏览器中工作所需的所有包。它有58个包，从第31行到第88行：
通过运行一个命令来设置一个现代的Web应用程序。通过在GitHub上创建一个帐户来为facebook/create-react-app开发做出贡献。
那是很多包！让我们把它分解一下，了解这些包是用来做什么的。
请注意，本文是使用Create React App 4.0.1版本作为参考编写的，本文将帮助您了解在使用Create React App NPM脚本时会发生什么。
Babel
Babel的主要目的是使您的代码可被较老的浏览器读取，自ES 2015发布以来，浏览器在实现新的JavaScript API和功能方面取得了缓慢但稳定的进展。
像Chrome和Safari这样最先进的浏览器可能支持新的JavaScript版本，但是JSX是一个只响应的功能，不是ES版本的一部分。
ESLint
ES Lint是一个JavaScript linter，它会扫描你的代码并标记任何代码错误。如果你有任何错误，库会从控制台警告你。它也很适合像VSCode这样的现代代码编辑器。
Jest
Jest是一个由Facebook开发的测试库，它与React配合得很好。Jest的依赖关系允许您为应用程序编写测试脚本，而不必安装另一个测试库。
PostCSS
PostCSS是一个转换你的CSS的JavaScript插件。PostCSS插件可以链接你的CSS，支持变量和混合语法，转置未来的CSS语法，以及更多取决于它的配置的东西。
Webpack
Webpack是一个用于JavaScript的模块捆绑器，它将应用程序所需的所有内容放在一起。这个库还可以在代码上运行诸如Babel、Jest、ES Lint和PostCSS之类的任务。
现在，您已经了解了依赖关系的用途，让我们继续了解反应脚本在场景背后真正做什么。
What react-scripts do
反应脚本是简单的脚本，用于运行以编程方式将React JSX语法转换为普通JavaScript所需的构建工具。 这个包提供了四个脚本：
"scripts: {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
CRA生成脚本命令
当您运行其中一个脚本时，/bin/react-scripts.js将被执行以启动进程。该脚本将检查传递到调用中的参数。它只接受启动、构建、测试和弹出参数。
您传递的任何其他参数都将导致脚本向日志返回未知脚本：
CRA未知脚本控制台输出
当您传递一个有效的参数时，它将运行位于/scripts文件夹内的脚本。让我们先看看start.js脚本。
反应脚本启动过程是如何工作的
使用start参数，NPM将开始为您的React应用程序提供开发服务器的过程。以下是此脚本的任务列表：
- 将构建环境设置为Node和Babel的开发
- 确保读取生成过程的环境变量
- 验证项目中安装的包是否已过时
- 检查代码是否在TypeScript中
- 导入流程所需的包，主要是Webpack相关的模块
- 检查可用端口和主机IP，默认为0.0.0.0:3000
- 运行编译器并监听来自Webpack的任何消息。Webpack将负责使用Babel、ES Lint和任何其他工具来准备代码
- 当Webpack运行时，脚本将打开您的浏览器并启动开发服务器
Webpack Dev Server创建的开发服务器还将为您的JavaScript文件中的更改创建监听器，当您进行更改并保存JavaScript文件时，开发服务器将重新编译您的代码并快速刷新浏览器。
如何使用反应脚本构建命令
生成命令将启动为您创建生产就绪的React应用程序的过程。大多数情况下，它执行与启动命令相同的步骤，只是它将生成环境设置为生产。
脚本将运行构建函数，将所有独立的文件捆绑到一个bundle.js文件中，而不是检查可用的端口并运行开发服务器。生产构建还将确保您的代码得到优化和缩小，以确保其具有最佳性能。 如果您以前已经运行过构建命令，脚本将获取您当前的文件大小，并将其与下一次构建进行比较。它将向您显示文件大小发生了多大变化：
React在控制台中显示gzip后的比较
此命令的最终输出可以在build/文件夹中找到，该文件夹在项目的根处生成。
如何使用反应脚本测试命令
测试命令将运行您使用Jest编写的任何测试脚本。您的测试将在节点环境下运行。Jest将在交互式监视模式下运行，这意味着每次您保存文件时，它将重新运行测试，就像启动命令重新编译代码一样。
您可以将测试文件保存在src/文件夹的任何地方，脚本将查找并执行任何带有.test.js或.spec.js扩展名的文件。它还将运行__tests__/文件夹下的任何. js文件。
您可以从终端看到测试结果：
控制台日志的反应脚本测试命令结果
请记住，CRA的测试命令只涵盖在稳定环境下测试您的组件和业务逻辑。要在浏览器中运行端到端测试，您需要使用另一个测试库。
如何使用反应脚本弹出命令
最后一个命令eject用于删除对反应脚本的依赖，并公开构建工具和配置供您修改。 反应脚本中的所有配置文件都将复制到项目根的config/文件夹中，运行构建的脚本将复制到scripts/文件夹中。依赖项也将移动到根的package.json文件中。 此命令是单向操作。一旦您从CRA设置中弹出，您就不能撤消它。如果您已经将代码提交到像Git这样的源代码管理系统中，您可以通过git签出或git重置撤消更改。 一般来说，你不需要运行这个命令，因为CRA已经提供了适合中小型项目的合理配置。如果你有兴趣了解更多，我在这里写了一篇关于弹出你的反应应用的文章：
结论
随着越来越多的人使用CRA，开发团队将收到更多关于该工具如何在实际项目中使用的反馈，开发团队获得的见解将确保CRA将保持最新工具的更新，并具有构建React应用程序的最佳实践。
感谢您的阅读。我希望这篇文章有助于您理解CRA是如何在引擎盖下工作的🙂
更多阅读：
