究竟什么是'react-scripts start'命令？

Question

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

第一种方式:

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设置开发环境并启动服务器,以及热模块重新加载.你可以在这里阅读,看看它为你做了什么.

使用create-react-app,您可以开箱即用.

• React,JSX,ES6和Flow语法支持.
• 超出ES6的语言附加功能,如对象扩展运算符.
• Autoprefixed CSS,因此您不需要-webkit-或其他前缀.
• 一个快速交互式单元测试运行器,内置支持覆盖率报告.
• 一个实时开发服务器,用于警告常见错误.
• 用于生成JS,CSS和图像的构建脚本,包含哈希和源图.
• 离线优先服务工作者和Web应用程序清单,符合所有Progressive Web App标准.
• 使用单个依赖项对上述工具进行无忧更新.

npm脚本

npm start是一个快捷方式npm run start.

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

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

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

Answer 2

正如Sagiv bg指出的那样,npm start命令是一个捷径npm run start.我只是想添加一个真实的例子来澄清它.

下面的示例设置来自github模板项目.该create-react-app限定了一堆限定了实际流量脚本.

"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"
},

为清楚起见,我添加了一个图表.

蓝色框是对脚本的引用,您可以使用package.json命令直接执行所有脚本.但正如您所看到的,实际上只有两个实际流程:

• npm run <script-name>
• npm run start

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

因此,例如,如果您运行npm run build(或npm start)实际转换为npm run start从命令行执行的命令.

在我的例子中,我有这个特殊的npm-run-all -p watch-css start-js命令,这是一个流行的插件,它搜索以"build:"开头的脚本,并执行所有这些.我实际上没有任何匹配那种模式.但它在npm-run-all切换后还有2个参数,这些是其他脚本.所以,这里它作为执行这两个脚本的简写.(即-p和watch-css)

• 将start-js可确保watch-css文件被转换为*.scss文件,并寻找未来的更新.

• 在开发模式下托管网站的*.css要点start-js.

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

Answer 3

简洁地说 - 它运行这个

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

Answer 4

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

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