简介

在前端开发中，调试通常是一个关键且有时令人头痛的任务。 unplugin-dingtalk 是一个简单但强大的工具，可以简化在钉钉环境中对 web 应用程序进行调试的过程。这个微小但功能强大的插件可以帮助开发人员快速启动他们的应用程序，并通过钉钉轻松访问和调试。

unplugin-dingtalk 旨在消除配置开发环境相关的麻烦，使您可以专注于实际的调试和构建应用程序。这个微小的插件包含一些强大的功能，可以增强您的开发体验。支持 vite、vue-cli、rebuild。

关键功能

在钉钉内打开调试链接：通过单击链接，您的应用程序将在钉钉中打开，允许您在真实的钉钉环境中进行内调试。
可选 vConsole 集成：unplugin-dingtalk 支持 vConsole，这是一个广泛使用的移动 Web 调试控制台。使用 vConsole，您可以轻松访问和检查控制台日志、网络请求、本地存储等。
支持 Chii 和 Vue Devtools：除了 vConsole 外，unplugin-dingtalk 还可以选择性地与 Chii 和 Vue Devtools 集成。 Chii 是一个轻量级的移动 Web 调试工具，而 Vue Devtools 是 Vue 开发人员用于检查和调试组件及其状态的强大工具。
调试 HttpOnly Cookies：该插件允许您调试通常无法访问的 HttpOnly cookies。这对于分析和解决与会话和身份验证相关的任何问题都至关重要。

简单集成

unplugin-dingtalk 旨在与您现有的工作流程无缝集成。它支持最常用的捆绑工具，例如 Vite 和 Vue CLI 5，使其配置变得非常简单：

Vite

// vite.config.ts
import UnpluginDingtalk from 'unplugin-dingtalk/vite';

export default defineConfig({
  plugins: [
    UnpluginDingtalk({
      enable: true,
    }),
  ],
});

Vue CLI 5

// vue.config.js
const [setupMiddlewares, unpluginDingtalk] = require('unplugin-dingtalk/webpack').default({
  enable: true,
});

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
  devServer: {
    setupMiddlewares,
  },
  configureWebpack: {
    plugins: [
      unpluginDingtalk,
    ],
  },
};

Rsbuild

// rsbuild.config.js
import { defineConfig } from '@rsbuild/core';
import createUnpluginDingtalk from 'unplugin-dingtalk/rspack';

const [setupMiddlewares, unpluginDingtalk] = createUnpluginDingtalk({
  enable: true,
});

export default defineConfig({
  dev: {
    setupMiddlewares: [
      setupMiddlewares,
    ],
  },
  tools: {
    rspack: {
      plugins: [
        unpluginDingtalk,
      ],
    },
  },
});

配置选项

unplugin-dingtalk 提供了灵活的配置选项，以满足您的特定需求：

interface Options {
  enable?: boolean
  targetUrl?: string
  corpId?: string
  debug?: boolean
  /**
   * 仅 vite 支持
   *
   * @link https://github.com/vadxq/vite-plugin-vconsole#vitevconsole-options
   */
  vconsole?: viteVConsoleOptions
  /** 需要调试的 cookies， 避免无法调试 HttpOnly 的 cookie */
  debugCookies?: string[]
  /** 默认值 `true` */
  chii?: boolean
  vueDevtools?: {
    enable?: boolean
    host?: string
    port?: number
  }
}

尾巴

我相信 unplugin-dingtalk 将成为前端开发人员工具箱中的一个有价值的工具。

最后，不要忘记给这个项目一个⭐！如果您有任何疑问、功能请求或建议，请随时创建一个 GitHub Issue或在下面留言交流。

一键启动✨：使用 unplugin-dingtalk 进行钉钉内调试

简介