【umi插件开发】控制台二维码

前言

在进行移动端webapp开发时,你是否会想要在真机上调试项目。
下面分析一下本地运行项目时,真机调试需要的步骤和麻烦的点。

  1. 你需要将手机和运行项目的电脑连接到同一局域网(连接同一个WiFi即可)。
  2. 查看电脑在局域网内的ip地址(windows在命令行输入ipconfig)。
  3. 手机浏览器中输入ip和端口打开项目。

然而局域网内的ip地址不是固定的,项目运行的端口也有可能由于端口占用导致端口不固定,所以存书签可能会失效,输入长串的ip地址和端口会比较繁琐,如果要在多台手机调试兼容问题就更让人生无可恋了。这自然就产生了需求:在运行项目时,在控制台输出二维码,扫码访问项目地址。

webpack插件

惯例,在造轮子之前去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插件开发】控制台二维码_第1张图片
umistart

没有我们想要的二维码输出,看来该插件并不兼容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的信息的,然而umiwebpackDevServer的启动方式与直接使用webpack有很大的不同,所以compiler实例中并没有DevServer的信息,所以该插件无法正常使用。

那么,下面就正式开始造轮子之路吧!

先拆解问题,要实现我们想要的效果,只需要重要的两步:

  1. 获取项目运行的地址。
  2. 输出包含ip地址和端口的二维码。

获取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'表示先黑后白,对于二维码大图,使用的是'\033[40m \033[0m''\033[47m \033[0m'
想要了解细节的可以去查看其源码github。

使用它输出二维码的代码如下:

import qrcode from 'qrcode-terminal';

qrcode.generate(`http://${ip}:${port}`, { small });

umi-plugin-qrcode

整合上面两步,umi-plugin-qrcode插件自然就成型了。获取ip地址其实也不用自己写,有许多js库都有这个功能,实现思路都大同小异,并且考虑了其他边界情况。

import address from 'address';
import qrcode from 'qrcode-terminal';

export default (api, { small = true, once = true } = {}) => {
  let port;
  let ip = address.ip();

  api.afterDevServer(({ server, devServerPort }) => {
    port = devServerPort;
  });

  api.onDevCompileDone(({ isFirstCompile }) => {
    once
      ? isFirstCompile && qrcode.generate(`http://${ip}:${port}`, { small })
      : qrcode.generate(`http://${ip}:${port}`, { small })
  })
}

umi中如何使用umi插件呢?(不是webpack插件)

  1. 安装插件
yarn add umi-plugin-qrcode --dev
  1. .umirc.js中配置插件
// .umirc.js
export default {
  plugins: [
    ['umi-plugin-qrcode', {
      small: false, // 二维码大小,默认small=true
      once: false // 第一次编译完成输出(默认)或者每次编译完成输出
    }]
  ]
}

由于上文所说的原因,插件支持的umi版本为2.7.0+
运行效果如下:
[图片上传失败...(image-ca4766-1564117439093)]

作者简介】:叶茂,芦苇科技web前端开发工程师,代表作品:口红挑战网红小游戏、服务端渲染官网、微信小程序粒子系统。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端领域框架、交互设计、图像绘制、数据分析等研究。 一起并肩作战: [email protected] 访问 www.talkmoney.cn 了解更多。

你可能感兴趣的:(【umi插件开发】控制台二维码)