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

新手上路,请多包涵

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

第一种方式:

npm run start 定义在 package.json 像这样:

"start": "react-scripts start",

第二种方式:

npm start

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

我试图找到定义,但我刚刚找到了一个具有此名称的包。我还是不知道这个命令有什么用?

原文由 Felipe Augusto 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 2.6k
2 个回答

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

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

react-scripts start 设置开发环境并启动服务器,以及热模块重新加载。您可以 在此处 阅读以了解它为您做了什么。

使用 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 。这会将您的项目从“托管”状态转换为非托管状态,您可以完全控制依赖项、构建脚本和其他配置。

原文由 Luke 发布,翻译遵循 CC BY-SA 4.0 许可协议

正如 Sagiv bg 指出的那样, npm start 命令是 npm run start 的快捷方式。我只是想添加 一个现实生活中的例子 来更清楚地说明这一点。

下面的设置来自 create-react-app github 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-cssstart-js (最后提到的那些脚本是监视文件更改的观察者,只有在被杀死时才会结束。)

  • watch-css 确保 *.scss 文件被翻译成 *.css 文件,并寻找未来的更新。

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

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

原文由 bvdb 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏