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

在進(jìn)行移動端webapp開發(fā)時(shí)，你是否會想要在真機(jī)上調(diào)試項(xiàng)目。
下面分析一下本地運(yùn)行項(xiàng)目時(shí)，真機(jī)調(diào)試需要的步驟和麻煩的點(diǎn)。

你需要將手機(jī)和運(yùn)行項(xiàng)目的電腦連接到同一局域網(wǎng)（連接同一個(gè)WiFi即可）。

查看電腦在局域網(wǎng)內(nèi)的ip地址（windows在命令行輸入ipconfig）。

手機(jī)瀏覽器中輸入ip和端口打開項(xiàng)目。

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

慣例，在造輪子之前去GitHub搜索一下有沒有已經(jīng)造好的輪子。果然，我不是第一個(gè)有這種需求的人。
devserver-qrcode-webpack-plugin是一個(gè)基于webpack的插件。但我平時(shí)開發(fā)項(xiàng)目使用的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)
  }
}

讓我們運(yùn)行試一下

沒有我們想要的二維碼輸出，看來該插件并不兼容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的編譯器實(shí)例中的options中讀取DevServer的信息的，然而umi中webpack及DevServer的啟動方式與直接使用webpack有很大的不同，所以compiler實(shí)例中并沒有DevServer的信息，所以該插件無法正常使用。

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

先拆解問題，要實(shí)現(xiàn)我們想要的效果，只需要重要的兩步：

獲取項(xiàng)目運(yùn)行的地址。

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

ip地址可以使用node的內(nèi)置模塊os模塊獲取，os模塊中的networkInterfaces方法可以獲取設(shè)備網(wǎng)卡的相關(guān)信息，包括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: 可以完善的判斷條件，兼容多網(wǎng)卡和不同平臺設(shè)備
        return items.address;
      }
    }
  }
}

對于項(xiàng)目運(yùn)行的端口，使用過umi的都知道，直接從配置中或者環(huán)境變量process.env.PORT中獲取是不準(zhǔn)確的，因?yàn)?b>umi有一套端口選擇機(jī)制，當(dāng)指定的端口被占用時(shí)，會自動選擇其他的的端口運(yùn)行。umi內(nèi)部使用detect-port檢查端口，detect-port的原理很簡單，使用node內(nèi)置net模塊嘗試監(jiān)聽指定的端口，當(dāng)端口被占用時(shí)嘗試監(jiān)聽其他端口，在監(jiān)聽成功后馬上取消監(jiān)聽，并將端口號返回。

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

插件中獲取port的基礎(chǔ)邏輯如下：

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

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