我一直在使用 React 项目create-react-app
,我有两个选项来启动项目:
第一种方式:
npm run start
定义package.json
如下:
"start": "react-scripts start",
第二种方式:
npm start
这两个命令有什么区别?而且, 的目的是react-scripts start
什么?
我试图找到定义,但我刚刚找到了一个具有此名称的包。我还是不知道这个命令有什么用?
我一直在使用 React 项目create-react-app
,我有两个选项来启动项目:
第一种方式:
npm run start
定义package.json
如下:
"start": "react-scripts start",
第二种方式:
npm start
这两个命令有什么区别?而且, 的目的是react-scripts start
什么?
我试图找到定义,但我刚刚找到了一个具有此名称的包。我还是不知道这个命令有什么用?
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 start
是npm run start
.
npm run
用于运行您在scripts
package.json 的对象中定义的脚本
如果脚本对象中没有start
键,则默认为node server.js
有时你想做的比反应脚本给你的更多,在这种情况下你可以做react-scripts eject
. 这会将您的项目从“托管”状态转换为非托管状态,您可以完全控制依赖项、构建脚本和其他配置。
正如 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-css
和start-js
. (最后提到的那些脚本是监视文件更改的监视器,只有在被杀死时才会完成。)
watch-css
确保*.scss
文件被翻译成*.css
文件,并寻找未来的更新。
start-js
指向以react-scripts start
开发模式托管网站的站点。
总之,该npm start
命令是可配置的。如果你想知道它的作用,那么你必须检查package.json
文件。(当事情变得复杂时,您可能想制作一个小图)。
简而言之 - 它运行这个
node node_modules/react-scripts/bin/react-scripts.js start
“start”是一个脚本的名字,在npm你运行这样的脚本npm run scriptName
,npm start
也是一个缩写 npm run start
至于“react-scripts”,这是一个专门与create-react-app相关的脚本