在编译的 svelte 代码中保留额外的脚本标签

Question

我目前有一个 svelte 程序，它被编译成相应的 js 和 css 文件，我在单独的 html 模板字符串中使用它们。这被用作应用程序的 webview 的一部分 - 它基本上被放入该应用程序末尾的 iframe 中。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta chatset='UTF-8">
        <meta http-equiv="Content-Security-Policy" content="default-src img-src https: data:; style-src 'unsafe-inline' ${webview.cspSource}; script-src 'nonce-${nonce}';">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="${styleResetUri}" rel="stylesheet">
        <link href="${styleMainUri}" rel="stylesheet">
        <link href="${styleMainPanel}" rel="stylesheet">
        <script nonce="${nonce}">
            const vscode = acquireVsCodeApi();
        </script>
    </head>
    <body>
        <main><App/></main>
        <script src="${scriptMainPanel}" nonce="${nonce}" />
        <script src="${gramJS}" nonce="${nonce}" />
    </body>
</html>

我有我的汇总配置设置，这样我的 svelte 文件夹中的任何内容都会被编译为 js 和 css 如上所述，我在行中导入。

行<script src="${scriptMainPanel}" nonce="${nonce}" />和<link href="${styleMainPanel}" rel="stylesheet">是我导入编译代码的地方。同样，我的 css 被导入。

注意我正在使用标签作为安装我的应用程序的地方，

import App from "../components/MainPanel.svelte";

const app = new App({
    target: document.getElementsByTagName("App")[0],
});

export default app;

问题

一切都完美无缺 - 它呈现得很好。但是，我面临的问题是，上面 html 代码的 body 中的 <script src="${gramJS}" nonce="${nonce}" /> 最终没有出现。 svelte 是否删除了所有其他标签？如果我在 body 中有其他 p、h1 或其他 html 标签，我通常会看到这种情况，它们会被删除 - 但我在这里将 App 作为目标，所以它不应该被删除是吗？

如果没有，是否有任何其他方法可以将我的脚本包含在 html 中？也许将它包含在预编译文件中，以便它在编译后仍然存在？

注意额外的脚本导入本身就是一个缩小的脚本，因为它是节点，出于某种原因我无法在 svelte 中使用它。

--更新1--

检查呈现的 HTML 后，我发现额外的脚本标签 <script src="${gramJS}" nonce="${nonce}" /> 被移到了脚本标签 <script src="${scriptMainPanel}" nonce="${nonce}" /> 内。我不明白为什么，更像是 html 中的任何其他标记被推入引用已编译的 svelte 代码的脚本中。

Answer 1

<script> 个元素不能自闭合。我不知道浏览器是如何纠正的，但我怀疑这两个脚本标签会以某种方式相互干扰。

为两个元素使用正确的结束标记：

<script src="${scriptMainPanel}" nonce="${nonce}"></script>
<script src="${gramJS}" nonce="${nonce}"></script>

在编译的 svelte 代码中保留额外的脚本标签

Keeping extra script tags in compiled svelte code

javascript

visual-studio-code

svelte

rollupjs

问题