如何让Web应用同时运行于浏览器与VS Code且避免代码重复？

阿华AIGC实验室

2026-5-12

Great question! Avoiding code duplication between a browser-based web app and a VS Code extension is totally achievable with a modular, layered architecture that separates your core logic from environment-specific code. Here's a practical, step-by-step approach to pull this off:

1. Split Your Code into Core vs. Environment-Specific Modules

First, carve your codebase into two distinct parts:

Core Module: This holds all your environment-agnostic code—think business logic, pure UI components (no browser/VS Code API dependencies), shared utilities, and data models. This is the "brain" of your app that works anywhere.
Environment Adapters: Two separate modules (one for the browser, one for VS Code) that wrap the core code and add environment-specific functionality (like DOM rendering for browsers, or webview communication for VS Code).

2. Use a Monorepo (Recommended)

To easily share the core module across both environments without duplicating code, set up a monorepo. Tools like npm Workspaces, Yarn Workspaces, or TurboRepo make this straightforward. Here's a sample directory structure:

your-project/
├── packages/
│   ├── core/          # Shared core code
│   │   ├── src/
│   │   │   ├── components/  # Pure UI components (e.g., React/Vue without browser globals)
│   │   │   ├── logic/       # Business logic (data processing, validation)
│   │   │   ├── utils/       # Shared helpers (date formatting, string utils)
│   │   │   └── api/         # Abstracted API interfaces (no fetch/VS Code-specific calls)
│   │   └── package.json
│   ├── web-app/       # Browser app
│   │   ├── src/
│   │   │   ├── index.js     # Bootstraps core components for the browser
│   │   │   └── styles/      # Browser-specific styling
│   │   └── package.json
│   └── vscode-extension/  # VS Code extension
│       ├── src/
│       │   ├── extension.js # VS Code activation & webview setup
│       │   └── webview/     # Wraps core components for VS Code webview
│       └── package.json
└── package.json

In both web-app and vscode-extension's package.json, add a dependency on your core module using workspace references:

"dependencies": {
  "@your-project/core": "workspace:*"
}

3. Adapt the Core to Each Environment

For the Browser App

This is the simpler of the two—just import your core components and logic, then hook them into browser APIs:

// web-app/src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from '@your-project/core/components/App';
import './styles/global.css';

// Render core app into the browser DOM
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

If your core needs environment-specific features (like API calls), implement browser-specific versions (e.g., using fetch) and pass them to core components via props or dependency injection.

For the VS Code Extension

VS Code uses webviews to display web content, so you'll package your core code and load it into a webview. Here's how:

Bundle the core for the webview: Use Webpack/Vite in your extension to bundle the core components + extension-specific webview code.
Create the webview in your extension:

// vscode-extension/src/extension.js
const vscode = require('vscode');
const path = require('path');

function activate(context) {
  let showAppCommand = vscode.commands.registerCommand('your-app.open', () => {
    const panel = vscode.window.createWebviewPanel(
      'yourApp',
      'Your App',
      vscode.ViewColumn.One,
      { enableScripts: true, localResourceRoots: [vscode.Uri.file(path.join(context.extensionPath, 'dist'))] }
    );

    // Get path to bundled core code
    const scriptUri = panel.webview.asWebviewUri(vscode.Uri.file(
      path.join(context.extensionPath, 'dist', 'app.js')
    ));

    // Load core code into webview HTML
    panel.webview.html = `
      <!DOCTYPE html>
      <html>
      <head><title>Your App</title></head>
      <body>
        <div id="root"></div>
        <script src="${scriptUri}"></script>
      </body>
      </html>
    `;
  });

  context.subscriptions.push(showAppCommand);
}

exports.activate = activate;

Bootstrap core in the webview: Similar to the browser, but add VS Code-specific communication logic if needed:

// vscode-extension/src/webview/index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from '@your-project/core/components/App';

// Send/receive messages to/from the VS Code extension
const sendToVSCode = (message) => window.postMessage(message, '*');
window.addEventListener('message', (event) => {
  if (event.data.type === 'workspaceInfo') {
    // Pass VS Code-specific data to core components
  }
});

// Render core app, passing VS Code communication helpers as props
ReactDOM.createRoot(document.getElementById('root')).render(
  <App sendMessage={sendToVSCode} />
);

4. Abstract Environment-Specific Dependencies

If your core code relies on features that differ between environments (like storage or API calls), don't hardcode browser/VS Code APIs. Instead, define abstract interfaces in the core and implement them in each adapter.

Example abstract API client in core:

// core/src/api/client.js
export class ApiClient {
  async fetch(endpoint) {
    throw new Error('Implement this method in your environment adapter');
  }
}

Browser implementation:

// web-app/src/api/browserClient.js
import { ApiClient } from '@your-project/core/api/client';

export class BrowserApiClient extends ApiClient {
  async fetch(endpoint) {
    const res = await fetch(`https://your-api.com${endpoint}`);
    return res.json();
  }
}

VS Code implementation (uses extension to proxy API calls):

// vscode-extension/src/webview/vscodeClient.js
import { ApiClient } from '@your-project/core/api/client';

export class VSCodeApiClient extends ApiClient {
  async fetch(endpoint) {
    return new Promise(resolve => {
      sendToVSCode({ type: 'apiCall', endpoint });
      window.addEventListener('message', (event) => {
        if (event.data.type === 'apiResponse') resolve(event.data.data);
      });
    });
  }
}

Put shared CSS, icons, and fonts in the core module's assets directory. For the VS Code webview, convert local resource paths using webview.asWebviewUri to avoid security restrictions.

6. Streamline Builds & Testing

Use a monorepo build tool like TurboRepo to build core, web-app, and extension in parallel.
Write unit tests for your core module to validate business logic without environment dependencies.
Add integration tests for each adapter to ensure the core works correctly in the browser and VS Code.

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