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

testbird 发布于2019-08-26 10:22 / 986人阅读

摘要：在外部没有好的检查方案，好在在今年月的一个更新中，在事件中提供了，这为插件获取端口号提供了简便的接口，具体可查看。擅长网站建设公众号开发微信小程序开发小游戏公众号开发，专注于前端领域框架交互设计图像绘制数据分析等研究。

前言

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

你需要将手机和运行项目的电脑连接到同一局域网（连接同一个WiFi即可）。

查看电脑在局域网内的ip地址（windows在命令行输入ipconfig）。

手机浏览器中输入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，原因是什么呢，我们查看插件源码

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和端口

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"表示先黑后白，对于二维码大图，使用的是"33[40m 33[0m"和"33[47m 33[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插件）

安装插件

yarn add umi-plugin-qrcode --dev

.umirc.js中配置插件

// .umirc.js
export default {
  plugins: [
    ["umi-plugin-qrcode", {
      small: false, // 二维码大小，默认small=true
      once: false // 第一次编译完成输出（默认）或者每次编译完成输出
    }]
  ]
}

由于上文所说的原因，插件支持的umi版本为2.7.0+。
运行效果如下：

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

云服务器混合云二维码生成插件php 控制插件 Umi js视频控制插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106063.html

Umi.js

摘要：，中文可发音为乌米，是一个可插拔的企业级应用框架。以路由为基础的，支持类的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。全局存于目录，所有页面都可引用页面不能被其他页面所引用。 umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展...

30e8336b8229 2019-08-26 13:29 评论0 收藏0
umi 配置多环境打包

摘要：平时我们开发应用时环境有开发环境测试环境生产环境等此时我们需要配置不同的环境获取不同的前缀，以满足日常开发需要。安装插件在文件里配置开发环境的复制两次，并更改文件名为和分别配置在其他文件可以获取作为前缀如封装的在的处配置打包命令平时我们开发应用时环境有开发环境、测试环境、生产环境等,此时我们需要配置不同的环境,获取不同的apiUrl前缀，以满足日常开发需要。 1.安装 cross-e...

cyrils 2019-08-23 15:04 评论0 收藏0
react 前端项目技术选型、开发工具、周边生态

摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识主架构：react, react-router, redux, redux...

hersion 2019-08-30 15:54 评论0 收藏0
react 前端项目技术选型、开发工具、周边生态

摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识主架构：react, react-router, redux, redux...

kidsamong 2019-08-23 14:07 评论0 收藏0
react 前端项目技术选型、开发工具、周边生态

摘要：更多参考通过库掌握函数组件有些时候，我们想要动态的加载一些组件按需加载，比如在一个单页面应用中页面的组件页面的组件页面的组件只有真正要实例化当前页面的时候，才会去加载相应的组件。 react 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 React 基础知识的文章，需要熟悉 React 相关知识主架构：react, react-router, redux, redux...

Hanks10100 2019-08-05 15:48 评论0 收藏0