react-scripts start'命令吗?

我一直在使用create-react-app与React项目一起工作，我有两个选项来启动项目:

第一个方法:

npm run start和package.json的定义，如下所示:

"start": "react-scripts start",

第二种方式:

npm start

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

我试图找到定义，但我只找到了一个这个名字的包。我还是不知道这个命令有什么用?

278411 次浏览
小开
最佳答案

创建-react-app和react-scripts

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应用程序清单，满足所有渐进式web应用程序标准。
  • 使用单个依赖项即可轻松更新上述工具。

npm脚本

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

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

如果scripts对象中没有start键，它将默认为node server.js

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

小开

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

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

小开

正如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"
},
为了清晰起见，我添加了一个图表。 enter image description here < / p >

蓝框是对脚本的引用，所有这些脚本都可以用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>开关。因此，在这里它执行两个脚本，即__ABC2和start-js。(最后提到的脚本是监视文件更改的监视器，只有在被杀死时才会完成。)

  • watch-css确保*.scss文件被转换为__abc2文件，并查找未来的更新。

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

总之，__ABC0命令是可配置的。如果你想知道它是做什么的，那么你必须检查package.json文件。(当事情变得复杂时，你可能想要做一个小图表)。

小开

简单地说，它运行这个

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

提交答案