create-react-app 和 react-scripts

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

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

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

• React、JSX、ES6 和 Flow 语法支持。
• ES6 之外的语言附加功能，如对象扩展运算符。
• Autoprefixed CSS，所以你不需要 -webkit- 或其他前缀。
• 一个快速的交互式单元测试运行器，内置对覆盖率报告的支持。
• 一个实时开发服务器，警告常见错误。
• 一个构建脚本，用于将 JS、CSS 和图像与哈希和源映射捆绑在一起进行生产。
• 一个离线优先的 Service Worker 和一个 Web 应用程序清单，满足所有渐进式 Web 应用程序标准。
• 具有单一依赖项的上述工具的无忧更新。

npm 脚本

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

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

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

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

正如 Sagiv bg 指出的那样，该npm start命令是npm run start. 我只是想添加一个现实生活中的例子来进一步澄清它。

下面的设置来自create-react-appgithub 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文件被转换为*.css文件，并寻找未来的更新。

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

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

“start”是一个脚本的名字，在 npm 中你运行这样的脚本npm run scriptName，npm start 也是一个缩写 npm run start

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

简洁 - 它运行这个

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