'react-scripts start' 命令到底是什么？答案

【问题标题】：What exactly is the 'react-scripts start' command?'react-scripts start' 命令到底是什么？
【发布时间】：2018-11-16 05:48:06
【问题描述】：

我一直在使用 create-react-app 处理一个 React 项目，我有两个选项来启动该项目：

第一种方式：

npm run start 在package.json 处的定义如下：

"start": "react-scripts start",

第二种方式：

npm start

这两个命令有什么区别？还有，react-scripts start 的用途是什么？

我试图找到定义，但我刚刚找到了一个具有此名称的包。还是不知道这个命令有什么用？

【问题讨论】：

"start" 是一个脚本的名称，在npm 中你运行这样的脚本npm run scriptName，npm start 也是npm run start 的缩写
react-scripts start 是在开发模式下运行 React 应用程序的正确命令。此命令存储在 package.json 中，因此您不必记住它，只需键入通常的 npm run start 即可。 npm start 是后者的快捷方式。

标签： reactjs npm create-react-app react-scripts

【解决方案1】：

create-react-app 和 react-scripts

react-scripts 是create-react-app 启动包中的一组脚本。 create-react-app 帮助您在不配置的情况下启动项目，因此您不必自己设置项目。

react-scripts start 设置开发环境并启动服务器，以及热模块重新加载。您可以阅读here 了解它为您做了什么。

使用create-react-app，您拥有以下开箱即用的功能。

React、JSX、ES6 和 Flow 语法支持。

ES6 之外的语言附加功能，例如对象扩展运算符。

自动前缀 CSS，因此您不需要 -webkit- 或其他前缀。

一种快速的交互式单元测试运行程序，内置支持覆盖率报告。

一个实时开发服务器，对常见错误发出警告。

一个构建脚本，用于捆绑 JS、CSS 和用于生产的图像，带有哈希和源映射。

一个离线优先的 Service Worker 和一个 Web 应用清单，满足所有 Progressive Web App 标准。

具有单一依赖项的上述工具的无忧更新。

npm 脚本

npm start 是npm run start 的快捷方式。

npm run 用于运行您在 package.json 的 scripts 对象中定义的脚本

如果脚本对象中没有start键，则默认为node server.js

有时你想做的比反应脚本给你的更多，在这种情况下你可以做react-scripts eject。这会将您的项目从“托管”状态转变为非托管状态，您可以完全控制依赖项、构建脚本和其他配置。

【讨论】：

你知道如何在生产环境中运行它吗？
要在作品中使用它，你会说npm run build。这将创建一个构建文件夹。然后您可以提供此文件夹。例如npm install -g serve然后serve -s buildfacebook.github.io/create-react-app/docs/deployment
似乎react-scripts 应该作为devDependency 包含在项目中，对吗？还是应该在package.json 的普通dependency 部分？
在我看来，对于客户端渲染的应用程序，是否依赖于 devDependency 无关紧要，因为捆绑器在这里很重要。在节点应用程序中利用 devDependencies 是有意义的

【解决方案2】：

"start" 是一个脚本的名字，在 npm 中你运行这样的脚本 npm run scriptName, npm start is also a short for npm run start

至于“react-scripts”这是一个专门与create-react-app相关的脚本

【讨论】：

【解决方案3】：

作为 Sagiv b.g.指出，npm start 命令是npm run start 的快捷方式。我只是想添加一个现实生活中的例子来更清楚地说明这一点。

下面的设置来自create-react-app github repo。 package.json 定义了一堆定义实际流程的脚本。

"scripts": {
  "start": "npm-run-all -p watch-css start-js",
  "build": "npm run build-css && react-scripts build",
  "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
  "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
  "start-js": "react-scripts start"
},

为了清楚起见，我添加了一个图表。

蓝色框是对脚本的引用，您可以使用npm run <script-name> 命令直接执行所有这些脚本。但如您所见，实际上只有 2 个实际流程：

npm run start
npm run build

灰色框是可以从命令行执行的命令。

因此，例如，如果您运行 npm start（或 npm run start），它实际上会转换为从命令行执行的 npm-run-all -p watch-css start-js 命令。

就我而言，我有这个特殊的npm-run-all 命令，它是一个流行的插件，可以搜索以“build:”开头的脚本并执行所有这些。我实际上没有任何与该模式匹配的东西。但它也可以用于并行运行多个命令，它在这里使用-p <command1> <command2> 开关。 所以，这里它执行 2 个脚本，即 watch-css 和 start-js。（最后提到的那些脚本是监视文件更改的监视器，只有在被杀死时才会完成。）

watch-css 确保将*.scss 文件转换为*.cssfiles，并寻找未来的更新。
start-js 指向以开发模式托管网站的react-scripts start。

总之，npm start 命令是可配置的。如果你想知道它的作用，那么你必须检查package.json 文件。（当事情变得复杂时，你可能想制作一个小图表）。

【讨论】：

我刚刚尝试通过create-react-app 创建新项目，而package.json 内部有不同的scripts。例如"start": "react-scripts start"
@MáraToner 现在完全有可能默认设置已经演变为其他设置。未来可能会继续发展。幸运的是，（如上所述）package.json 可配置为运行任何 CLI 工具或脚本。所以，这个答案的本质应该仍然有效。
华丽的图表。是否有可以从 package.json 文件的“脚本”部分生成的工具？那绝对是惊人的。

【解决方案4】：

简而言之 - 它运行这个

node node_modules/react-scripts/bin/react-scripts.js start

【讨论】：