VSCode插件开发第一天——打包配置

今天将从零开始开发一个用于在VSCode中阅读epub文件的插件。在这篇文章中，我将记录一些在开发过程中遇到的问题以及相应的解决方案。相信通过阅读这篇文章，你也能够自己开发一个类似的插件。

1. 准备工作

在开始之前，请确保你已经安装了以下工具：

Node.js 和 Git；
Visual Studio Code；
Yeoman 和 VSCode 插件生成器。你可以通过以下命令进行安装：
bash 复制代码
```
npm install -g yo generator-code
```
在这里，yo 是Yeoman工具的命令行界面。Yeoman是一个自动化项目生成工具，它的目标是帮助开发者快速构建项目的基本结构，包括文件和目录。通过使用Yeoman，你可以快速地创建自己的项目脚手架工具。例如，许多公司的项目都有通用的基础模板，Yeoman可以帮助你管理和生成这些模板。如果你对此感兴趣，你可以深入了解更多详细信息。

generator-code 则是Yeoman管理的Visual Studio Code（VSCode）扩展项目示例模板。通过使用 yo 命令，你可以快速搭建出一个基本的VSCode插件项目框架，从而节省时间和精力。

2. 创建插件项目

使用以下命令来生成项目：

bash 复制代码

yo code

运行该命令后，会出现多个提问选项，根据你的需求进行填写即可。你可以根据提示，选择是否使用Webpack进行打包。在这里，我选择不使用Webpack，因为后面我们需要使用Vue来构建Web界面，需要进行一些配置改造。

3. 配置打包

项目结构

项目的结构如下所示：

markdown 复制代码

- .vscode
- node_modules
- out
- src
  - extension.ts
- package.json

src/extension.ts 文件包含了插件的源码，其中默认提供了一个简单的示例：
ts 复制代码
```
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
        console.log('Congratulations, your extension "dodo-reader-ext" is now active!');
        let disposable = vscode.commands.registerCommand('dodo-reader-ext.helloWorld', () => {
                vscode.window.showInformationMessage('Hello World from Dodo Reader Ext!');
        });

        context.subscriptions.push(disposable);
}

export function deactivate() {}
```
1. export function activate(context: vscode.ExtensionContext)：这是扩展的激活函数。当扩展被激活时，VS Code 会调用此函数。传入的 context 参数是一个扩展上下文对象，它可以用于注册命令、事件监听器等。
2. vscode.commands.registerCommand('dodo-reader-ext.helloWorld', () => { ... })：这里定义了一个名为 "dodo-reader-ext.helloWorld" 的命令。当用户在 VS Code 中执行这个命令时，注册的回调函数将会被调用。
3. export function deactivate() {}：这是扩展的停用函数。当扩展被停用时，VS Code 会调用此函数。通常在这里进行一些清理操作。
要使上述定义的命令生效，还需要在 package.json 文件中进行注册，如下所示：
json 复制代码
```
"contributes": {
  "commands": [
    {
      "command": "dodo-reader-ext.helloWorld",
      "title": "Hello World"
    }
  ]
}
```
上述配置的作用是在VS Code中注册一个命令，命令的标识符对应上述的 "dodo-reader-ext.helloWorld"，命令的标题为 "Hello World"。

开发调试

按下 F5 键进入调试开发主机，然后在调试开发主机中按下 Ctrl+Shift+P 键，输入刚刚命名的 "Hello World" 命令标题，点击运行，你会在右下角看到弹出窗口提示信息。

在按下 F5 后的过程中，会自动运行 npm run watch 命令，并且你可以在对应的控制台中（DEBUG CONSOLE）看到插件代码中的控制台信息。

打包配置

webview

在VSCode插件开发中，通常需要引入Webview。你可以简单地引入一个HTML页面，也可以使用Vue、React等框架生成页面。如果你需要使用打包生成的页面，就需要进行一些打包配置。例如，如果你选择使用Vue，可以使用Vite进行打包。Vite的打包配置非常简单，你甚至可以直接使用Vite的模板复制到对应目录中。需要注意的是，在插件开发中不能使用Vite server中的热更新，而应该在每次修改后手动将代码打包到磁盘。具体的配置如下所示：

js 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// ...

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // ...
  ],
  base: './', // 空字符串或 `./`（用于嵌入形式的开发）
  build: {
    outDir: 'dist/web', // 打包目录
  },
})

然后，在 package.json 文件中添加以下命令：

json 复制代码

{
  // ...
  "scripts": {
    // ...
    "web:build": "vite build",
    "web:watch": "vite build --watch",
    // ...
  },
  // ...
}

在开发过程中，你可以运行 npm run web:watch 来进行开发，--watch 参数会监听代码的变化并自动进行打包。

插件代码

默认情况下，插件代码的打包是使用TypeScript命令行工具（tsc）进行的。tsc的工作包括移除TypeScript的声明并将代码转换为CommonJS模块形式，但不包括代码压缩和混淆。如果你想实现代码压缩和混淆，也可以使用Vite进行lib模式的打包，但这可能与上述Webview打包有冲突，需要进行额外的配置。在这里，我推荐使用一个无需配置文件的打包工具tsup，你只需要将 package.json 文件中的打包命令修改如下：

json 复制代码

"compile": "tsup src/extension.ts --dts --minify --external=vscode"
"watch": "npm run compile -- --watch",

当然，仅仅修改这个命令是不够的。你可能会发现，按下 F5 键后无法打开调试开发主机了。这是因为 F5 键在打开调试时会检查打包是否完成，然后才会打开调试开发主机。因此，我们需要修改 .vscode/tasks.json 文件，将其内容替换为以下代码：

json 复制代码

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "watch",
      "isBackground": true,
      "problemMatcher": {
        "fileLocation": "relative",
        "pattern": {
          "regexp": "_______",
          "file": 1,
          "location": 2,
          "severity": 3,
          "code": 4,
          "message": 5
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "Building",
          "endsPattern": "Build success" // 重点，匹配打包结束标识
        }
      },
      "presentation": {
        "reveal": "never"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

通过以上配置，你就可以更轻松地开发和调试你的VSCode插件，同时实现了Web界面的打包和插件代码的打包。在开发过程中，可能还会有一些新的问题，再来慢慢配置完善即可。

源码：github.com/wenyikun/do...
VSCode 插件：marketplace.visualstudio.com/items?itemN...