vscode 扩展。 来自 webview 的“JS 导入”

Question

I'm write extension for vscode with webview as single web application. My project has the following structure:

In index html I want to import a script.

<script type="module">
import * as CommandHandler from '/core/CommandHadnler.js'
//some code
</script>

WebView setup localResourceRoots

const UI_PATH = path.join(context.extensionPath, 'UI');
this._panel = vscode.window.createWebviewPanel(
    'JSONRPCTester',
    'JSONRPC Tester',
    vscode.ViewColumn.Two,
    {
        enableScripts: true,
        localResourceRoots: [
           vscode.Uri.file(UI_PATH)
        ]
    } 
 );

I see that there is an attempt to load the module, but I get the error (Ignore RPC* ).

load url:

vscode-webview://a8f78cdc-7d22-4793-810f-67c2d10dfb67/core/ClientProxy.js

Probably it incorrect Content Security Policy. My policy setup:

<meta http-equiv="Content-Security-Policy" content="default-src self; img-src vscode-webview-resource:; script-src vscode-webview-resource: 'self' 'unsafe-inline'; style-src vscode-webview-resource: 'self' 'unsafe-inline'; ">

Answer 1

The path '/core/CommandHadnler.js' is invalid. You have to specify the full path of the JavaScript file on the local machine and convert it with Webview.asWebviewUri .

See https://code.visualstudio.com/api/extension-guides/webview#loading-local-content