reactjs “react-scripts start”命令到底是什么?

jv2fixgn  于 2023-01-17  发布在  React
关注(0)|答案(5)|浏览(474)

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

第一种方式:

npm run start,在package.json处的定义如下:
"start": "react-scripts start",

第二种方式:

npm start
这两个命令之间有什么区别?react-scripts start的用途是什么?
我试着去找定义,但是我只找到了一个这个名字的包。我还是不知道这个命令有什么用?

eeq64g8w

eeq64g8w1#

创建React应用程序和React脚本

react-scriptscreate-react-app starter pack中的一组脚本。create-react-app帮助您启动项目而无需配置,因此您不必自己设置项目。
react-scripts start设置开发环境并启动服务器,以及热模块重载。您可以阅读这里,看看它为您做了什么。
使用create-react-app,您可以获得以下开箱即用的特性。

  • 支持React、JSX、ES6和Flow语法。
  • ES6之外的语言附加项,如对象扩展操作符。
  • 自动前缀CSS,所以你不需要-webkit-或其他前缀。
  • 一个快速的交互式单元测试运行程序,内置了对覆盖率报告的支持。
  • 警告常见错误的实时开发服务器。
  • 一个构建脚本,用于将JS、CSS和图像与散列和源Map捆绑在一起以用于生产。
  • 脱机优先的服务辅助线程和Web应用清单,满足所有渐进式Web应用条件。
  • 上述工具的无障碍更新具有单一依赖项。

npm脚本

npm startnpm run start的快捷方式。
npm run用于运行您在package.json的scripts对象中定义的脚本
如果脚本对象中没有start键,它将默认为node server.js
有时候你想做的比react脚本提供给你的更多,在这种情况下你可以做react-scripts eject,这将把你的项目从“托管”状态转换成非托管状态,在这种状态下你可以完全控制依赖关系,构建脚本和其他配置。

pzfprimi

pzfprimi2#

正如Sagiv b.g.所指出的,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>命令执行。但是正如您所看到的,实际上只有两个实用的流程:

  • 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文件。(当事情变得复杂时,你可能想做一个小图表)。
x0fgdtte

x0fgdtte3#

简洁地说-它运行这个

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

goqiplq24#

“start”是脚本的名称,在npm中,您可以运行如下脚本npm run scriptNamenpm startis also a short fornpm run start
至于“react-scripts”,这是一个专门与create-react-app相关的脚本

n53p2ov0

n53p2ov05#

**npm startnpm run start**的缩写形式

您可以在此处查看**Difference between npm start and npm run start**

React脚本启动

react-scripts是一组脚本,用于支持创建、开发和测试react应用程序。它由create-react-app使用。
create-react-app是官方支持的创建单页React应用程序的方式。create react app使用webpack解析和捆绑应用程序。webpack解析应用程序并从webpack配置文件中指定的入口点创建依赖关系图。解析时,webpack使用babel将应用程序转换为JavaScript,Webpack使用生成的依赖图创建一个JavaScript文件,该文件由应用程序源代码和应用程序使用的模块组成,并通过script标签将该文件注入到public/index.html中。并在http://localhost:3000上启动开发服务器。在浏览器中导航到此URL将显示应用程序的实时交互式示例。保存到源代码的任何更改都将自动反映在正在运行的应用程序示例中。您可以在此处了解有关此主题的详细信息

相关问题