是否可以将 SvelteKit 项目构建为内联所有 JS 和 CSS 的单个输出 HTML 文件?是否可以将 SvelteKit 配置为支持这种输出格式,或者我是否需要使用外部构建工具?
单个 HTML 文件输出是我项目中的核心要求。我正在使用 ssr: false
构建 SvelteKit SPA和 @sveltejs/adapter-static
与 fallback: 'index.html'
配置。
我以前用过https://github.com/richardtallent/vite-plugin-singlefile使用简单的 vite
来完成此操作+ svelte
设置 - 这很好。但是,我无法添加 vite-plugin-singlefile
到svelte.config.js
我的 SvelteKit 项目中的 vite 插件。
这是我尝试过的 SvelteKit 配置:
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:<script type="module">
SvelteKit 输出并且我需要转换为内联脚本。 <script type="module">
,而不是动态的 import()
在 esm 模块内部调用。 任何想法都会有所帮助!
最佳答案
这是一个技术含量低的解决方案,但您可以分别用样式和脚本标签替换指向 CSS 和 JS 文件的链接。然后在标签之间复制粘贴这些文件的内容。
只要您将样式/脚本标签放在与之前链接 CSS 和 JS 相同的位置,就不会出现任何重大问题(尽管任何带有 defer 的 JS 脚本都需要进入一个事件处理程序,说只有运行该脚本的内容页面已完全加载)。
当然,您使用的是导入的文件,所以这完全取决于您是否能够访问它们的源代码。如果您无法访问它,那么不用说您将无法将其复制粘贴到您的 HTML 文件中。
关于javascript - SvelteKit:如何使用内联的 JS 和 CSS 将构建输出为单个 HTML 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67893778/