Node.js中为类实例创建独立外部模块实例的解决方案

问题 #

我是Node.js新手，正在基于VS Code Webview UI Toolkit开发VS Code扩展。开发时遇到一个问题：多个面板实例会共享外部JS模块@x/y的状态——打开带someIdentifier1的面板后再打开带someIdentifier2的面板，返回第一个面板刷新会显示第二个面板的信息。

排查后发现，第二个面板初始化时externalLibrary的ready_值为"ready"，说明模块实例没有做到独立。我尝试在构造函数中删除模块缓存后重新引入，但问题依旧。

请问如何为每个面板实例创建完全独立的externalLibrary实例？希望得到详细的最佳实践说明。

相关代码示例 #

初始代码（thepanel.ts）

import * as vscode from "vscode";
var externalLibrary = require("@x/y");  

export class myPanel {
   public static currentPanel: myPanel| undefined;
   private constructor( panel: vscode.webviewPanel, extensionUri: vscode.Uri, someIdentifier:string){
          //.. MyPanel初始化逻辑.. 
          externalLibrary.someInitializationMethod(someIdentifier);  
         //^ 基于someIdentifier对externalLibrary进行关键配置
   }

    public static render (extensionUri: vscode.Uri, someIdentifier: string, .. 其他参数 ..){
        const panel = vscode.window.createWebviewPanel("open-panel", "Panel", .. 其他参数 .. ){
           // .. 其他逻辑..
           myPanel.currentPanel = new myPanel(panel, extensionUri, someIdentifier); 
       }
    }

   //.. 其他代码 .. , 
   // 包含Webview中点击刷新按钮时更新信息的方法

}

尝试修改后的代码

import * as vscode from "vscode";  

export class myPanel {
   public static currentPanel: myPanel| undefined;
   private _externalLibrary: any;

   private constructor( panel: vscode.webviewPanel, extensionUri: vscode.Uri, someIdentifier:string){
          //.. MyPanel初始化逻辑.. 

          delete require.cache[require.resolve("@x/y")];
          this._externalLibrary = require("@x/y");


          externalLibrary.someInitializationMethod(someIdentifier);  
         //^ 基于someIdentifier对externalLibrary进行关键配置
   }

    public static render (extensionUri: vscode.Uri, someIdentifier: string, .. 其他参数 ..){
        const panel = vscode.window.createWebviewPanel("open-panel", "Panel", .. 其他参数 .. ){
           // .. 其他逻辑..
           myPanel.currentPanel = new myPanel(panel, extensionUri, someIdentifier); 
       }
    }

   //.. 其他代码 .. , 
   // 包含Webview中点击刷新按钮时更新信息的方法，该方法会使用this._externalLibrary.nameOfTheMethod

}

解决方案与最佳实践 #

1. 优先确认模块的实例化支持 #

先查@x/y的文档，看它是否暴露构造函数或工厂方法——如果模块本身支持实例化，这是最可靠的隔离方式：

// 假设模块支持类实例化
import { ExternalLibrary } from "@x/y";

// 在myPanel构造函数中创建独立实例
this._externalLibrary = new ExternalLibrary();
this._externalLibrary.someInitializationMethod(someIdentifier);

每个面板的模块实例完全独立，不会共享任何状态。

2. 修复缓存清除的错误实现 #

你修改后的代码有个明显bug：清除缓存后引入的是this._externalLibrary，但初始化时却调用了未定义的全局externalLibrary。正确写法应该是：

private constructor( panel: vscode.webviewPanel, extensionUri: vscode.Uri, someIdentifier:string){
    // 1. 获取模块的绝对路径
    const modulePath = require.resolve("@x/y");
    // 2. 清除Node.js的模块缓存
    delete require.cache[modulePath];
    // 3. 重新引入并绑定到当前实例的属性
    this._externalLibrary = require("@x/y");
    // 4. 使用实例属性调用初始化方法
    this._externalLibrary.someInitializationMethod(someIdentifier);
}

注意：这种方式仅适用于模块内部没有硬编码单例逻辑的情况，如果模块用闭包固定了全局状态，清除缓存也没用。

3. 修复面板实例的静态管理问题 #

你的代码用myPanel.currentPanel这个静态属性存储实例，会导致新面板覆盖旧面板的引用。如果要支持多面板，应该用数组管理：

export class myPanel {
   // 替换单个静态属性为数组
   public static panels: myPanel[] = [];
   private _panelId: string;

   private constructor( panel: vscode.webviewPanel, extensionUri: vscode.Uri, someIdentifier:string){
       this._panelId = someIdentifier;
       // ... 其他初始化逻辑 ...
       // 将当前实例加入管理数组
       myPanel.panels.push(this);
       // 监听面板销毁，从数组中移除实例
       panel.onDidDispose(() => {
           myPanel.panels = myPanel.panels.filter(p => p._panelId !== this._panelId);
       });
   }

   public static render (extensionUri: vscode.Uri, someIdentifier: string, ...其他参数){
       const panel = vscode.window.createWebviewPanel("open-panel", "Panel", ...其他参数);
       new myPanel(panel, extensionUri, someIdentifier); 
   }
}

4. Webview前端环境的隔离方案 #

如果你的模块逻辑是运行在Webview的前端页面中（而非扩展的Node.js环境），那么每个Webview的上下文本身就是隔离的。这种情况需要：

• 将@x/y打包成前端可用的文件，放入扩展的资源目录
• 在Webview的HTML中通过<script>标签引入该文件，每个Webview会加载独立的模块实例

5. 最佳实践总结 #

• 优先选支持实例化的模块，用构造函数创建独立实例是最稳定的方案
• 若用缓存清除方式，必须确保调用的是当前实例的模块属性，且模块无内部单例锁
• 多面板场景下，用数组替代单个静态属性存储实例，避免覆盖
• 区分模块运行环境：Node.js侧（扩展后端）和Webview侧（前端），采用对应隔离方式

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