从 Svelte 项目输出单个 HTML 文件 [英] Output Single HTML File from Svelte Project
问题描述
我在网上找不到任何示例来展示如何(或者我们是否可以)使用 Rollup(而不是 Webpack)从 Svelte 项目输出单个 HTML 文件，其中包含内联注入的所有 CSS 和 JS(而不是作为 URL)在脚本中).
I can't find any example anywhere online that shows how to (or if we can) output a single HTML file from a Svelte project using Rollup (not Webpack), containing all CSS and JS injected inline (and not as URLs in script).
推荐答案
没有内置的方法可以实现这一点，因此您必须编写自己的插件才能实现.这段代码是完成这项工作的某种尝试，可以作为起点.它实际上并不完整或良好.(老实说，我怀疑你会用这种方法赢得任何表现)
There is no built-in way to achieve this, so you'll have to write your own plugin to do so. This code is some sort of an attemt to get this done and could act as a starter point. It is in no way actually complete or good. (to be honest I doubt you will be winning any sort of performance with this approach)
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')
]
};
这将依赖于一个 template.html 文件，它最基本的就是这样
This will rely on a template.html file that in it's most basic would like this
<html>
<head>
<script>%%script%%</script>
</head>
<body></body>
</html>
这篇关于从 Svelte 项目输出单个 HTML 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
