Vue CLI 3 UI 关闭端口的插件剖析

2023-12-24 19:34:14

引言
Vue CLI 3 UI 提供了一系列方便实用的插件，这些插件可以帮助我们更轻松地开发和管理 Vue 项目。其中，kill-port 插件可以关闭网络端口，非常适用于需要在开发过程中关闭某些端口的情况。

插件注册

kill-port 插件的注册位置在 ~/node_modules/@vue/cli-ui/lib/util/killPort.js 文件中。我们可以看到，插件注册的方式非常优雅。

export default function killPort(port) {
  return new Promise((resolve, reject) => {
    const pid = pidFromPort(port)
    if (pid) {
      fkill(pid, (err) => {
        if (err) {
          reject(err)
        } else {
          this.$apollo.mutate({
            mutation: gql`
              mutation killPort($port: Int) {
                killPort(port: $port)
              }
            `,
            variables: { port }
          }).then(() => {
            resolve()
          }).catch(err => {
            reject(err)
          })
        }
      })
    } else {
      resolve()
    }
  })
}

关闭端口的实现

kill-port 插件通过 pid-from-port 和 fkill 两个函数来实现关闭端口的功能。

pid-from-port

pid-from-port 函数通过端口号获取进程 ID。它的实现原理是通过系统命令 lsof -i tcp:${port} 获取占用该端口的进程信息，然后从信息中提取进程 ID。

export function pidFromPort(port) {
  const result = require('child_process').execSync(`lsof -i tcp:${port}`)
  const pid = result.toString().split(/\s+/).find(line => !line.startsWith('COMMAND'))
  return pid || null
}

fkill

fkill 函数通过进程 ID 关闭进程。它的实现原理是通过系统命令 kill -9 ${pid} 向指定进程发送 SIGKILL 信号，从而强制关闭进程。

export function fkill(pid, cb) {
  require('child_process').exec(`kill -9 ${pid}`, cb)
}

this.$apollo.mutate 的应用

在插件中，this.$apollo.mutate 方法用于更新端口状态。当端口被关闭时，插件会向服务器发送请求，更新端口的状态。

this.$apollo.mutate({
  mutation: gql`
    mutation killPort($port: Int) {
      killPort(port: $port)
    }
  `,
  variables: { port }
}).then(() => {
  resolve()
}).catch(err => {
  reject(err)
})