什么是＆＃39; react-scripts开始＆＃39;命令？

Question

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

第一种方式：

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

"start": "react-scripts start",

第二种方式：

和npm start

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

我试图找到这个定义，但我刚刚发现了一个名字的包，我仍然不知道这个命令是什么意思。

Answer 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的语言附加功能，如对象扩展运算符。
  
• Autoprefixed CSS，因此您不需要-webkit-或其他前缀。
  
• 快速交互式单元测试运行器，内置支持覆盖率报告。
  
• 一个实时开发服务器，用于警告常见错误。
  
• 用于捆绑生产的JS，CSS和图像的构建脚本，包含哈希和源图。
  
• 脱机优先服务工作者和Web应用程序清单，符合所有Progressive Web App标准。
  
• 对上述工具进行单一依赖的无忧更新。
  

npm脚本

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

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

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

有时你想做的比反应脚本给你的更多，在这种情况下你可以做react-scripts eject。这将使您的项目从'＃34; managed＆＃34;状态进入非托管状态，您可以完全控制依赖关系，构建脚本和其他配置。

Answer 2

以Sagiv b.g.指出，npm start命令是npm run start的快捷方式。我只是想添加一个真实的例子，以使它更多一些。

下面的设置来自create-react-app github存储库。 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>命令直接执行所有脚本。但是正如您所看到的，实际上只有两个实际流程：

• npm run start
• npm run build

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

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

就我而言，我有一个特殊的npm-run-all命令，这是一个流行的插件，用于搜索以“ build：”开头的脚本并执行所有这些命令。我实际上没有与该模式匹配的任何东西。但是在-p开关之后，它还有2个参数，它们是其他脚本。 因此，这里是执行这两个脚本的简写。 （即watch-css和start-js）

• watch-css确保将*.scss文件转换为*.css文件，并寻找将来的更新。

• start-js指向以开发模式托管网站的react-scripts start。

最后，npm start命令是可配置的。如果您想知道它的作用，则必须检查package.json文件。（并且当情况变得复杂时，您可能希望制作一些图表）。

Answer 3

＆＃34;开始＆＃34;是一个脚本的名称，在npm中你运行这样的脚本npm run scriptName，npm start is also a short for npm run start

至于＆＃34; react-scripts＆＃34;这是一个专门与create-react-app

相关的脚本