Angular中使用自定义命令调用脚本

一、使用场景

由于后台映射的是不同的服务器，频繁切换时需要经常修改proxy.conf.json文件。因此希望有个方法能解决这个困扰。

二、实现

1、在项目的根目录下，创建存放脚本、自定义命令的文件夹：

• 在项目的根目录下创建文件夹：bin
• 因为可能需要很多自定义命令，则可以在bin文件夹中进行分类，此时用于项目启动，所以创建start文件；
• 在start文件中创建脚本文件（allProxy.bat）、自定义命令文件（allProxy.js）

2、在package.json中增加bin属性，存放自定义命令

....
"bin": {
    "soc": "./bin/start/allProxy.js",//自定义命令-soc
    "soc:start": "./bin/start/allProxy.js" //此时的自定义命令-soc start
  }
....

3、创建自定义命令的文件，主要实现调用脚本

#!/usr/bin/env node

/**
 * 设置配置的默认路径用于启动相对应的配置项
 * 创建一个子进程，单独运行脚本
 */
const child_process = require('child_process');

//拿到当前路径
const path = process.cwd();

//异步执行脚本，防止阻塞，用于启动start.bat脚本
child_process.exec('start ' + path + '/bin/start/start.bat proxy.conf.json --port 4200');

注：

      【1】#!/usr/bin/env node

              为脚本语言指定解释器，用node执行当前文件的代码，#!/usr/bin/env node代表全局环境变量中的 node；

      【2】child_process

              child_process.exec（）创建一个异步的子进程用于执行脚本；

4、脚本文件

@echo off
REM 声明采用UTF-8编码
chcp 65001
REM 进入当前目录
cd /d %~dp0
REM 执行启动指令
cd ..
cd ..
REM 根据传入的参数不同，启动不一样的代理文件及端口
ng serve -o --proxy-config ./proxy/%1 --port %2

5、在的项目的文件夹下，输入命令：soc 或 soc start，将会运行脚本