如何将Shiki打包进.vsix并确保其正常运行？

背景 #

我正在为Roo Code（cline的优秀分支项目）开发VS Code扩展的PR，使用Shiki实现语法高亮功能。Shiki采用动态导入的方式注册主题与语言。

调试与打包测试对比

扩展在VS Code调试模式（F5）下运行完全正常，说明Shiki模块及其主题/语言注册逻辑无问题，但通过vsce package生成的.vsix安装包会缺失这些动态模块，导致安装后无法正常工作。

我曾尝试显式导入模块避免被摇树优化，但未生效：

import shellReg from 'shiki/langs/shell.mjs';
void shellReg; // 尝试阻止摇树优化？没这么简单...

问题 #

由于Shiki的主题和语言通过动态导入实现，VSCE打包过程无法识别这些依赖，最终.vsix安装包中缺少对应模块，导致扩展安装后无法实现语法高亮。

疑问 #

如何配置扩展或调整导入方式，让vsce package将Shiki的动态模块纳入最终包？是否有强制包含这些模块的最佳实践或变通方案？

测试步骤 #

若你有AI模型密钥，可按以下步骤复现问题：

调试模式（F5）可正常运行：

• 克隆代码：git clone -b roo-code-block-copy-button https://github.com/KJ7LNW/cline.git Roo-Code
• 进入目录：cd Roo-Code
• 安装依赖：npm run install:all
• 打开项目：code .
• 按F5启动调试
• 添加支持的API密钥，让模型输出“display some example python code”
• 此时语法高亮可正常显示

打包后无法运行：

• 关闭VS Code
• 在终端执行：
  • npm run vsix
  • code --install-extension bin/roo-cline-3.9.1.vsix
• 重启VS Code
• 重复上述输出代码的步骤，无语法高亮显示，且Help->Toggle Dev Tools->Console中无明显错误信息

解决方案 #

针对VSCE打包时无法识别Shiki动态导入模块的问题，可尝试以下几种方案：

1. 配置package.json强制包含模块

在扩展的package.json中，将Shiki的主题和语言模块路径显式加入files数组，强制VSCE打包时包含这些文件：

{
  "files": [
    "node_modules/shiki/langs/*.mjs",
    "node_modules/shiki/themes/*.json"
  ]
}

如果仅需部分模块，可指定具体文件名，比如node_modules/shiki/langs/python.mjs、node_modules/shiki/themes/github-dark.json。

2. 使用Shiki预打包版本

Shiki提供包含常用语言和主题的预打包版本，直接导入即可，无需动态加载，VSCE打包时会自动识别依赖：

import { createHighlighter } from 'shiki/bundle';

async function initHighlighter() {
  const highlighter = await createHighlighter({
    themes: ['github-dark'],
    langs: ['python', 'shell']
  });
  // 后续使用highlighter进行语法高亮
}

该方案适合不需要自定义大量语言/主题的场景。

3. 调整webpack配置（若扩展用webpack构建）

在webpack.config.js中通过插件指定需要保留的动态导入模块，避免被摇树优化：

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.ContextReplacementPlugin(
      /shiki\/langs/,
      new RegExp(`^./(${['python', 'shell'].join('|')})\\.mjs$`)
    ),
    new webpack.ContextReplacementPlugin(
      /shiki\/themes/,
      new RegExp(`^./(${['github-dark'].join('|')})\\.json$`)
    )
  ]
};

4. 更换依赖安装方式

若使用yarn安装依赖出现识别问题，可尝试用npm重新安装后再打包：

rm -rf node_modules package-lock.json
npm install
vsce package

内容的提问来源于stack exchange，提问作者KJ7LNW