react或vue启动命令那些事

浅浅的花香味﹌ 2023-09-30 12:12 9阅读 0赞

**目录**

1.前言

2.一条启动命令执行多条命令语句

3.隆重推出工具：Conacurrently

4.隆重推出工具：wait-on

4.隆重推出工具：cross-env

--------------------

### 1.前言 ###

> 使用过vue或者react的开发者，应该都会知道，在项目中有个package.json文件，里面有项目的启动命令，这些命令我们可以自定义，甚至，有些项目需要启动多条命令，下面将会介绍如何自定义命令和如何更加方便的配置开发环境。

--------------------

### 2.一条启动命令执行多条命令语句 ###

> **关键符号&表示和的意思**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_17_color_FFFFFF_t_70_g_se_x_16][]

**然而，这种命令有很多缺点：**

> **1.不能跨平台，windowes不好用**
> 
> **2.命令没有先后之分，容易出问题**
> 
> **3.输出没有逻辑性，看起来很乱**
> 
> **4.占用端口**

--------------------

### 3.隆重推出工具：Conacurrently ###

> **Conacurrently同时同步的意思**
> 
> **--save-dev表示只在开发时用**

npm install -g concurrently --save-dev

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_13_color_FFFFFF_t_70_g_se_x_16][]

修改后的命令如下：

**注意：斜杠\\代表转义的意思**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_16_color_FFFFFF_t_70_g_se_x_16][] **缺点：**

**比如说运行两条命令，结果有一条慢一些，就会出问题，比如白屏现象。**

--------------------

### 4.隆重推出工具：wait-on ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_17_color_FFFFFF_t_70_g_se_x_16 1][]

npm install wait-on  --save-dev

**修改后的命令如下**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16][]

--------------------

### 4.隆重推出工具：cross-env ###

> **作用：解决跨平台设置环境变量的问题**

npm install --save-dev cross-env

**比如下面这个，意思是我打开项目的时候，不要默认给我打开浏览器**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_12_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e418c05c7186469683979a1fd6cdbaa4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_13_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/cc9852be426c424aaf32e778e3ec24f1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_13,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f863cc18ecd046fb89812137d1567f0e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_17_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/a69ce4d21cbd4d978e93782ea45ef6a2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5c537185b3084ad3be3d287ce84027a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/35410ed42d6b407e8c512e8ee79e3945.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_12,color_FFFFFF,t_70,g_se,x_16