我在网上找不到任何示例来说明如何(或者如果我们可以)使用 Rollup(不是 Webpack)从 Svelte 项目中输出单个 HTML 文件，其中包含内联注入(inject)的所有 CSS 和 JS(而不是作为脚本中的 URL) .
最佳答案
没有内置的方法可以实现这一点，因此您必须编写自己的插件才能做到这一点。此代码是完成此操作的某种尝试，可以作为起点。它绝不是真正完整或好的。 (老实说，我怀疑你会用这种方法赢得任何形式的表现)
import svelte from 'rollup-plugin-svelte';
import fs from 'fs';
import path from 'path';
function inlineSvelte(template, dest) {
return {
name: 'Svelte Inliner',
generateBundle(opts, bundle) {
const file = path.parse(opts.file).base
const code = bundle[file].code
const output = fs.readFileSync(template, 'utf-8')
bundle[file].code = output.replace('%%script%%', () => code)
}
}
}
export default {
input: 'src/main.js',
output: {
format: 'iife',
file: './public/index.html',
name: 'app'
},
plugins: [
svelte({
}),
inlineSvelte('./src/template.html')
]
};
<html>
<head>
<script>%%script%%</script>
</head>
<body></body>
</html>
关于svelte - 从 Svelte 项目输出单个 HTML 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61565251/