前端项目配置更改自动重启方案-五八三

最近换到新的项目组维护几个老项目，在debug及做需求的状态中频繁切换，每切换一次就要手动重启一次node服务，效率极低

为了节省时间，整理出以下几个proxy更改自动重启服务方案

以下讨论基于vue-cli项目

方案一：dynamic-proxy

1. 原理

通过json配置proxy，更改json文件内容；
刷新页面缓存，系统自动重定向代理；

2. 实现

新建proxy/config.json、proxy/index.js文件

在proxy/config.json中新增内容

[
    {
        "env": "dev",
        "target": "https://localhost:3000",
        "active": true
    },
    {
        "env": "test",
        "target": "https://localhost:4000",
        "active": false
    },
    {
        "env": "prod",
        "target": "https://localhost:5000",
        "active": false
    }
]

在proxy/index.js中新增内容

const fs = require('fs')

const path = require('path')



const json = fs.readFileSync(path.resolve(__dirname, './config.json'), 'utf-8')

const config = JSON.parse(json)

module.exports = () => ({
  '/': {
    // 需要给占位内容
    target: 'placeholder',
    ws: true,
    changeOrigin: true,
    router: function(req) {
      return config.find(con => con.active).target
    }
  }
})

启动服务成功后，更改vue.config.js配置

// 引入proxy配置
const proxy = require('./proxy/index.js')



// 更改webpack的disableHostCheck，禁用host检查
config.disableHostCheck = true


// 更改proxy 
devServer: {
  port: 3000,
    proxy: proxy()
  //  {
  //   '/': {
  //     target: target, // 代理请求，解决开发时的跨域
  //     ws: true,
  //     changeOrigin: true
  //   }
  // }
},

更改proxy/config.json的active选项，然后清除缓存刷新页面，会发现页面proxy已经被代理到更新后的target。

这是网上出现频率较高的方案。

But 我试了"@vue/cli-service": "^4.5.15"以及"@vue/cli-service": "^3.3.0"，都达不到预期效果，所以不推荐当前方案。

升级vue-cli会引起别的诸多依赖问题，成本过高没有继续深入验证。

方案二：PM2

1. 原理

~~通过使用pm2的监听重启功能，监听配置文件，当配置文件改变时，自动执行重启命令。~~

2. 实现

~~安装pm2~~
```
npm install pm2 -g
```
~~package.json在scripts新增命令~~
```
"pm": "pm2 start --watch --ignore-watch 'src' --name config -- run serve",
```
~~简单解释下上面命名行的语义：~~

~~--watch：监听当前目录，只有当前目录文件有改动，都会执行pm2 restart；~~

~~--ignore-watch 'src'：不监听目录src；~~

~~--name config：执行的pm2自定义任务名称config；~~

~~run serve：执行的脚步名称serve，相当于npm run serve~~

~~综合理解就是：==监听非src目录及文件，只要有文件改动就会执行npm run serve==~~
~~分别执行~~
```
npm run pm
```
```
pm2 log
```
~~执行npm run pm之后会显示当前执行的node进程，当比如vue.config.js文件改动会重新启动serve，pm2 log可以直观查看进程运行过程。~~

~~主要问题有2个~~

~~参数过多、配置相对复杂、pm2过重，让简单问题复杂化~~
~~上面的脚本刚开始正常，验证时频繁出现问题~~

所以当前方案可行，但不推荐，有兴趣可以自行探索~

方案三：nodemon（推荐）

1. 原理

使用nodemon监听配置文件；
当配置文件改变时，自动执行重启命令；

2. 实现

安装nodemon
```
npm install --save-dev nodemon
```
package.json文件配置监听及重启命令

在 "scripts"字段中新增以下键值
```
"dev": "nodemon --watch vue.config.js --exec  npm run serve"
```
npm run serve是原来的启动命令

这样只要每次改动vue.config.js文件，nodemon就会自动重新执行启动命令。

下面是成功运行的截图

方案四：原生实现

但凡有第三方依赖，该依赖基本都是基于原生实现封装而来。
所以下面接着基于node原生来实现–监听配置文件更新，自动重启服务的需求。

1. 原理

启动服务；
监听配置文件变化；
文件内容变更，kill掉当前进程；
执行重启服务；

2. 实现

新建文件watch.js，并新增以下内容

const fs = require('fs')

const { spawn } = require('child_process')



// 保存进程
let __process = null


// 启动进程
function startProcess() {
  // TODO 这里要改成自己真实启动服务的命令  
  __process = spawn('yarn', ['serve'])

  // 打印输出到控制台
  __process.stdout.on('data', (data) => {
    console.log(data.toString())
  })
}

// 重启进程
function restartProcess() {
  if (__process !== null) {
    try {
      // 清除进程，
      process.kill(__process.pid)
      // 杀死进程
      __process.kill('SIGKILL')
      // 重置进程
      __process = null
    } catch (error) {
      console.log('Exception: ' + error.message, 'bad')
    }
  }

  // 重新启动进程
  startProcess()
}

// 启动进程
startProcess()

// 监听文件变化--TODO 这里改成自己真实需要监听的文件，比如 .env.development.local
fs.watch('vue.config.js', (event, filename) => {
  restartProcess()
})