从 Svelte 项目输出单个 HTML 文件

Question

从 Svelte 项目输出单个 HTML 文件

Sam*_*mmy 6 rollup rollupjs svelte svelte-3

我在网上找不到任何示例来展示如何（或者我们是否可以）使用 Rollup（而不是 Webpack）从 Svelte 项目输出单个 HTML 文件，其中包含内联注入的所有 CSS 和 JS（而不是脚本中的 URL） .

Answer 1

没有内置的方法可以实现这一点，因此您必须编写自己的插件才能做到这一点。这段代码是完成这项工作的某种尝试，可以作为起点。它实际上并不完整或良好。（说实话，我怀疑你会用这种方法赢得任何表现）

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')
    ]
};

Run Code Online (Sandbox Code Playgroud)

这将依赖于一个template.html文件，它最基本的就是这样

<html>
    <head>
        <script>%%script%%</script>
    </head>
    <body></body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，7 月前
查看次数：	2093 次
最近记录：	4 年，3 月前