SvelteKit:如何使用内联JS和CSS将构建输出为单个HTML文件

Question

是否可以将SvelteKit项目构建为一个内联所有JS和CSS的单个输出HTML文件？SvelteKit可以配置为支持这种输出格式吗？还是我需要使用外部构建工具？

单个HTML文件输出是我项目的核心需求。我正在使用ssr: false和@sveltejs/adapter-static以及fallback: 'index.html'配置构建SvelteKit SPA。

我以前使用过https://github.com/richardtallent/vite-plugin-singlefile通过简单的vite+svelte设置来实现这一点，效果非常好。但是，我无法将vite-plugin-singlefile添加到我的SvelteKit项目中的svelte.config.js-vite插件中。

这是我尝试过的SvlteKit配置：

import preprocess from 'svelte-preprocess'
import adapter from '@sveltejs/adapter-static'
import { viteSingleFile } from 'vite-plugin-singlefile'
const config = {
preprocess: preprocess(),
kit: {
target: '#svelte',
adapter: adapter({ fallback: 'index.html' }),
ssr: false,
vite: {
plugins: [viteSingleFile()],
build: {
target: 'es2019',
assetsInlineLimit: 100000000,
chunkSizeWarningLimit: 100000000,
cssCodeSplit: false,
sourcemap: false,
brotliSize: false,
rollupOptions: {
inlineDynamicImports: true,
output: {
manualChunks: () => 'everything.js',
},
},
outDir: 'build'
}
}
},
}
export default config

我还研究过使用其他解决方案来内联所有CSS和JS:

• https://github.com/remy/inliner-这不支持内联SvelteKit输出的<script type="module">，我需要将其转换为内联脚本
• 这里提到的解决方案不起作用：从Svelte项目输出单个HTML文件
• https://github.com/jonathantneal/posthtml-inline-assets-不支持<script type="module">，也不支持esm模块内部的动态import()调用

任何想法都会有所帮助！

Answer 1

这是一个低技术的解决方案，但您可以分别用样式和脚本标记替换指向CSS和JS文件的链接。然后在标记之间复制粘贴这些文件的内容。

只要你把style/script标记放在之前链接CSS和JS的同一个地方，就不会有任何大问题(尽管任何带有defer的JS脚本都需要进入一个事件处理程序，说只运行该脚本的内容，页面就已满载(。

当然，您使用的是导入的文件，所以这一切都取决于您是否能够访问它们的源代码。如果您无法访问它，那么不用说，您将无法将它复制粘贴到HTML文件中。