VSC WebView中加载node_modules资源

· 2 min read

最近开发的gitlink插件遇到个问题，在WebView中加载node_modules资源，当然也可以直接使用CDN资源，只是速度上来说不如直接加载本地资源，因此这里解决下如何加载node_modules资源。

配置

npm安装依赖

npm install @highlightjs

注意是依赖不是开发依赖。

webview配置localResourceRoots

 const panel = vscode.window.createWebviewPanel(
            'codeImage',
            'Code Snippet Image',
            vscode.ViewColumn.Beside,
            {
                enableScripts: true,
                retainContextWhenHidden: true,
                localResourceRoots: [
                    vscode.Uri.joinPath(extensionContext.extensionUri),
                ]
            }
        );

这里直接使用extensionContext.extensionUri作为localResourceRoots，这样就可以直接拓展中的node_modules资源了。

在webview中加载资源

<link rel="stylesheet" href="node_modules/@highlightjs/cdn-assets/styles/github-dark.min.css">

注意使用相对路径写法不要使用绝对路径写法，决定路径并不支持，WEB地址支持。

HTML中href路径处理

const readHtml = async (htmlPath: string, panel: vscode.WebviewPanel) =>
    (fs.readFileSync(htmlPath, {
        encoding: 'utf8'
    }))
      .replace(/%CSP_SOURCE%/gu, panel.webview.cspSource)
      .replace(
        /(src|href)="([^"]*)"/gu,
        (_, type, src) =>
          `${type}="${panel.webview.asWebviewUri(
            vscode.Uri.file(path.resolve(htmlPath, '../../../', src))
          )}"`
      );


this._panel.webview.html = await this._getHtmlContent(code, language, options);

 let htmlTemplate = await readHtml(
            path.resolve(this._extensionContext.extensionPath, 'resources/webview/index.html'),
            this._panel
 );

比如我这里是这么处理的，即将html中的所有资源根据html所处的路径，处理下，最终得到node_modules资源路径的相对拓展的路径即可。

注意

.vscodeignore文件中不需要添加node_modules文件夹，否则打包会不携带node_modules。

写在最后

如上即可解决在WebView中加载node_modules资源的问题，这样假如之后需要升级，只需要npm update包，之后重新打包即可。

Last updated on Mar 17, 2025

VSC WebView中加载node_modules资源

配置

注意

写在最后

Related