摘要：在外部沒有好的檢查方案，好在在今年月的一個更新中，在事件中提供了，這為插件獲取端口號提供了簡便的接口，具體可查看。擅長網站建設公眾號開發微信小程序開發小游戲公眾號開發，專注于前端領域框架交互設計圖像繪制數據分析等研究。

在進行移動端webapp開發時，你是否會想要在真機上調試項目。
下面分析一下本地運行項目時，真機調試需要的步驟和麻煩的點。

你需要將手機和運行項目的電腦連接到同一局域網（連接同一個WiFi即可）。

查看電腦在局域網內的ip地址（windows在命令行輸入ipconfig）。

手機瀏覽器中輸入ip和端口打開項目。

然而局域網內的ip地址不是固定的，項目運行的端口也有可能由于端口占用導致端口不固定，所以存書簽可能會失效，輸入長串的ip地址和端口會比較繁瑣，如果要在多臺手機調試兼容問題就更讓人生無可戀了。這自然就產生了需求：在運行項目時，在控制臺輸出二維碼，掃碼訪問項目地址。

慣例，在造輪子之前去GitHub搜索一下有沒有已經造好的輪子。果然，我不是第一個有這種需求的人。
devserver-qrcode-webpack-plugin是一個基于webpack的插件。但我平時開發項目使用的umi腳手架，但是我們都知道umi封裝的是webpack，所以webpack插件也是可以使用的，那我們就試試看行不行。

umi使用chain-webpack自定義webpack配置，安裝插件后，在.umirc.js添加如下配置即可

import qrcode from "qrcode-webpack-plugin"

export default {
  chainWebpack(config, { webpack }) {
    config.plugin("qrcode")
      .use(qrcode)
  }
}

讓我們運行試一下

沒有我們想要的二維碼輸出，看來該插件并不兼容umi，原因是什么呢，我們查看插件源碼

apply(compiler) {
    const devServer = compiler.options.devServer

    if (!devServer) {
      console.warn("webpack-server-qrcode: needs to start webpack-dev-server")
      return
    }

    const protocol = devServer.https ? "https" : "http"
    const port = devServer.port
    const _ip = this.getIPAdress()[0]
    const url = `${protocol}://${_ip}:${port}`
    this.printQRcode(url)
  }

插件是從webpack的編譯器實例中的options中讀取DevServer的信息的，然而umi中webpack及DevServer的啟動方式與直接使用webpack有很大的不同，所以compiler實例中并沒有DevServer的信息，所以該插件無法正常使用。

那么，下面就正式開始造輪子之路吧！

先拆解問題，要實現我們想要的效果，只需要重要的兩步：

獲取項目運行的地址。

輸出包含ip地址和端口的二維碼。

ip地址可以使用node的內置模塊os模塊獲取，os模塊中的networkInterfaces方法可以獲取設備網卡的相關信息，包括IP地址和mac地址等。

// getIp.js
const os = require("os");

module.exports = () => {
  const interfaces = os.networkInterfaces();
  
  for (let interface of Object.values(interfaces)) {
    for(let items of interface) {
      if (items.family === "IPv4" && !items.internal) {
        // TODO: 可以完善的判斷條件，兼容多網卡和不同平臺設備
        return items.address;
      }
    }
  }
}

對于項目運行的端口，使用過umi的都知道，直接從配置中或者環境變量process.env.PORT中獲取是不準確的，因為umi有一套端口選擇機制，當指定的端口被占用時，會自動選擇其他的的端口運行。umi內部使用detect-port檢查端口，detect-port的原理很簡單，使用node內置net模塊嘗試監聽指定的端口，當端口被占用時嘗試監聽其他端口，在監聽成功后馬上取消監聽，并將端口號返回。

在外部沒有好的檢查方案，好在umi在今年5月的一個更新中，在afterDevServer事件中提供了devServerPort，這為插件獲取端口號提供了簡便的接口，具體可查看issue#2386。

插件中獲取port的基礎邏輯如下：

export default api => {
   api.afterDevServer(({ server, devServerPort }) => {
    console.log(devServerPort)
  });
}

控制臺輸出二維碼可以使用qrcode-terminal，該庫的主要邏輯為：根據字符串生成二維碼每個位置的顏色信息二維數組。用字符"u2588"表示縱向兩個白色，"u2580"表示先白后黑，"u2584"表示先黑后白，對于二維碼大圖，使用的是"