ChatGPT解决这个技术问题 Extra ChatGPT

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

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

第一种方式:

npm run startpackage.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 是后者的快捷方式。

L
Luke

创建反应应用程序和反应脚本

react-scriptscreate-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 startnpm run start 的快捷方式。

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

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

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


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

正如 Sagiv bg 所指出的,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"
},

https://i.stack.imgur.com/AgqTe.png

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

npm 运行开始

npm 运行构建

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

因此,例如,如果您运行 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 文件被翻译成 *.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 文件的“脚本”部分生成的工具?那绝对是惊人的。
j
johndpope

简而言之 - 它运行这个

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

S
Sagiv b.g

“start”是脚本的名称,在 npm 中,您可以运行类似 npm run scriptNamenpm start is also a short for npm run start 的脚本

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