vite-plugin-vconsole在windows不生效的原因排查

背景

在Vite使用vConsole，方便移动端的本地开发。官方文档见这里：https://github.com/vadxq/vite...。

场景复现

windows客户端
"vite-plugin-vconsole": "^1.1.0"
"vite": "^2.7.0",
"vconsole": "^3.9.5",
node v12.18.3
yarn 1.22.15
vite.config.js配置如下：

import { resolve } from 'path';
...
viteVConsole({
        entry: resolve(__dirname, './src/main.ts'), // entry file
        localEnabled: mode !== 'prod', // dev environment
        enabled: mode !== 'prod', // build production
        config: {
          // vconsole options
          maxLogNumber: 1000,
          theme: 'light'
        }
})
...

尝试方案

1. 以为自己配置错了。反复对比官方配置和别人的模板，没有错误。
2. 跑一下别人搭建好的模板。也是不生效。
3. 谷歌搜索过关键字，仍然没有人提出
4. 官方github issue也没有人提出

源码分析

直接打开vite-plugin-vconsole的源码

"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/index.ts
function viteVConsole(opt) {
  let viteConfig;
  let isDev = false;
  const {entry, enabled = true, localEnabled = false, config = {}} = opt;
  return {
    name: "vite:vconsole",
    enforce: "pre",
    configResolved(resolvedConfig) {
      viteConfig = resolvedConfig;
      isDev = viteConfig.command === "serve";
    },
    transform(_source, id) {
      if (id === entry && localEnabled && isDev) {
        return `${_source};import VConsole from 'vconsole';new VConsole(${JSON.stringify(config)});`;
      }
      if (id === entry && enabled && !isDev) {
        return `${_source};import VConsole from 'vconsole';new VConsole(${JSON.stringify(config)});`;
      }
      return _source;
    }
  };
}


exports.viteVConsole = viteVConsole;

看了下源码，总体来说很简单，就是根据一些参数判断，然后把vConsole新建实例的源码注入。目前没有生效，所以就要看看参数哪里对不上，于是献上console大法

 transform(_source, id) {
      console.log('id', id)
      console.log('entry', entry)
      console.log('localEnabled', localEnabled)
      console.log('isDev', isDev)
      console.log('enabled', enabled)
      console.log('_source', _source)
      if (id === entry && localEnabled && isDev) {
        return `${_source};import VConsole from 'vconsole';new VConsole(${JSON.stringify(config)});`;
      }
      if (id === entry && enabled && !isDev) {
        return `${_source};import VConsole from 'vconsole';new VConsole(${JSON.stringify(config)});`;
      }
      return _source;
    }

执行的结果

id D:/wehotel-inspection/src/main.ts
entry D:\wehotel-inspection\src\main.ts
localEnabled true
isDev true
enabled true

可以看到，id≠entry，本来id是unix系统的正斜杠格式，我们的entry是通过path的resolve功能解析得到的windows的反斜杠格式，所以我们只需要把path解析的结果，转换成正斜杠就可以了

解决方案

用正则来替换就可以了：

viteVConsole({
        entry: resolve(__dirname, './src/main.ts').replace(/\\/g, '/'), // entry file
        localEnabled: mode !== 'prod', // dev environment
        enabled: mode !== 'prod', // build production
        config: {
          // vconsole options
          maxLogNumber: 1000,
          theme: 'light'
        }
      }),

其他

补充一下，import {resolve} from 'path'是通过安装这个包@types/node获取的