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

Question

我一直在使用 create-react-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, and Flow syntax support.

Language extras beyond ES6 like the object spread operator.

Autoprefixed CSS, so you don’t need -webkit- or other prefixes.

A fast interactive unit test runner with built-in support for coverage reporting.

A live development server that warns about common mistakes.

A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.

An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.

Hassle-free updates for the above tools with a single dependency.

npm 脚本

npm start 是 npm run start.

的快捷方式

npm run 用于运行您在 package.json

的 scripts 对象中定义的脚本

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

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

Answer 2

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

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

Answer 3

作为 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> 命令直接执行所有这些脚本。但是正如你所见，实际上只有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文件。（当事情变得复杂时你可能想制作一个小图表）。

Answer 4

简洁 - 它运行这个

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

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

What exactly is the 'react-scripts start' command?

npm

reactjs

react-scripts

create-react-app

create-react-app 和 react-scripts

npm 脚本