“ react-scripts start”命令究竟是什么?


175

我一直在使用React项目,create-react-app并且有两个选项可以启动该项目:

第一种方式:

npm run start定义package.json如下:

"start": "react-scripts start",

第二种方式:

npm start

这两个命令有什么区别?的目的是react-scripts start什么?

我试图找到定义,但我只是找到一个带有名称的包,而我仍然不知道该命令的含义。


2
“开始”是脚本的名称,在npm您运行诸如此类的脚本时npm run scriptNamenpm start也是“ npm run start
Sagiv bg”

3
react-scripts start是在开发人员模式下运行React应用的正确命令。该命令存储在package.json中,因此您不必记住它,而只需键入通常的命令即可npm run startnpm start是后者的捷径。
克里斯G

Answers:


148

create-react-app和react-scripts

react-scriptscreate-react-app入门包中的一组脚本。create-react-app可帮助您启动项目而无需进行配置,因此您不必自己设置项目。

react-scripts start设置开发环境并启动服务器,以及热模块重新加载。您可以在这里阅读以了解它为您所做的一切。

使用create-react-app,您可以立即使用以下功能。

  • React,JSX,ES6和Flow语法支持。
  • ES6以外的其他语言,例如对象传播运算符。
  • 自动前缀的CSS,因此您不需要-webkit-或其他前缀。
  • 快速的交互式单元测试运行程序,内置对覆盖率报告的支持。
  • 实时开发服务器警告常见错误。
  • 一个构建脚本,用于将JS,CSS和图像与哈希和源映射捆绑在一起进行生产。
  • 满足所有渐进式Web应用程序标准的脱机优先服务工作者和Web应用程序清单。
  • 单一依赖项即可轻松更新上述工具。

npm脚本

npm start是的快捷方式npm run start

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

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

有时您想要做的事情超出react脚本所能提供的,在这种情况下,您可以做react-scripts eject。这会将您的项目从“托管”状态转换为非托管状态,您可以在其中完全控制依赖项,构建脚本和其他配置。


您知道如何在生产中运行它吗?
user269867 '19

10
要在生产中使用它,你会说npm run build。这将创建一个构建文件夹。您可以再使用此文件夹。例如npm install -g serve,然后是serve -s build facebook.github.io/create-react-app/docs/deployment
路加福音

前三个链接都链接到相同的URL。
安德鲁·格林

将第二个链接更改为“包含的内容”
路加福音

63

正如Sagiv bg指出的那样,该npm start命令是的快捷方式npm run start。我只是想添加一个真实的例子来进一步说明它。

下面的设置来自create-react-appgithub仓库。该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-cssstart-js(最后提到的那些脚本是监视文件更改的观察者,并且仅在被杀死时才会完成。)

  • watch-css可确保*.scss文件被转换为*.css文件,并寻找未来的更新。

  • start-js该点react-scripts start哪些主机在开发模式的网站。

总之,该npm start命令是可配置的。如果您想知道它的作用,则必须检查该package.json文件。(而且当事情变得复杂时,您可能希望制作一些图表)。


3

“ start”是脚本的名称,在npm中,您可以运行如下所示的脚本npm run scriptNamenpm start 它也是 npm run start

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.