VS Code插件扩展开发如何正确引用node_modules内已有组件

VS Code Web扩展运行在浏览器沙箱环境，不存在Node.js原生的文件系统与模块加载逻辑，直接引用未被打包的node_modules依赖必然出现模块加载失败问题，按以下步骤调整即可：

• 调整打包工具配置
  所有非vscode标识的npm依赖（包括公司私有组件）都必须被打包进最终的扩展产物，不能被标记为外部依赖。如果使用官方推荐的esbuild打包，参考如下配置：

  // build/esbuild.config.js
  const esbuild = require('esbuild');
  
  esbuild.build({
    entryPoints: ['src/extension.ts'],
    bundle: true,
    outfile: 'dist/extension.js',
    // 仅将vscode模块设为外部依赖，其余依赖全部打包
    external: ['vscode'],
    // Web扩展必须指定平台为browser，不能使用node平台配置
    platform: 'browser',
    target: 'es2020',
    format: 'cjs',
    sourcemap: true
  }).catch(err => {
    console.error(err);
    process.exit(1);
  });
  

  如果你使用webpack打包，同理要在externals配置里仅保留vscode，移除所有公司组件相关的外部依赖规则。
• 修正TypeScript编译配置
  确保tsconfig.json的模块解析规则适配打包工具，避免编译阶段找不到组件入口：

  {
    "compilerOptions": {
      "target": "ES2020",
      "module": "ES2020",
      "moduleResolution": "bundler",
      "esModuleInterop": true,
      "skipLibCheck": true,
      "outDir": "dist"
    },
    "include": ["src/**/*"]
  }
  

• 特殊格式组件处理
  如果公司提供的组件是仅支持浏览器直接引入的UMD格式、没有提供ES Module入口，不要在扩展激活逻辑中直接import：将组件的静态产物复制到扩展的media等静态资源目录，在Webview视图中通过webview.asWebviewUri()方法转换路径后引入，不要依赖node_modules的运行时访问路径。
• 产物校验
  打包完成后检查dist/extension.js文件，确认公司组件的代码已经被合并进产物中，不存在运行时动态请求node_modules路径的逻辑——浏览器环境无法访问本地文件系统的node_modules目录，所有运行时代码必须提前编译打包为可在浏览器直接执行的静态文件。

避坑提示：不要在Web扩展代码中使用require()动态加载node_modules内的模块，CommonJS动态文件加载逻辑在浏览器沙箱中完全无法运行，所有依赖必须在编译阶段被静态分析并打包。

内容的提问来源于stack exchange，提问作者Mani Sravani Bandaru