汇总：单个 html 输出

Question

我正在尝试将我的 Svelte 应用程序打包到单个 Html 文件输出中。我已经设法通过基于该答案的配置获得了所需的输出：

使用“npm 运行 dev”，第一个构建一切正常，但我在（实时重新加载）构建后遇到问题：bundle['bundle.css'] 未填写我的 inlineSvelte 的 generateBundle 函数。

我没能为 rollup-plugin-embed-css 更改 rollup-plugin-css-only，它似乎有一个适合我需要的名称。

这是我的 rollup.config.js :

import svelte from 'rollup-plugin-svelte';
import livereload from 'rollup-plugin-livereload';
import css from 'rollup-plugin-css-only';
...

function inlineSvelte(templatePath, dest) {
  return {
    name: 'Svelte Inliner',
    generateBundle(opts, bundle) {
      const file = path.parse(opts.file).base;
      const jsCode = bundle[file].code;
      const cssCode = bundle['bundle.css'].source;
      const template = fs.readFileSync(templatePath, 'utf-8');
      bundle[file].code = template
        .replace('%%script%%', jsCode)
        .replace('%%style%%', cssCode);
    }
  }
}

export default {
  input: 'src/main.js',
  output: {
    format: 'es',
    file: outputDir + 'index.html',
    name: 'app'
  },
  plugins: [
    svelte({
        compilerOptions: {
            dev: !production
        }
    }),
    css({ output: 'bundle.css' }),
    resolve({
        browser: true,
        dedupe: ['svelte']
    }),
    commonjs(),
    !production && livereload(outputDir),
    inlineSvelte('./src/template.html')
  ],
  watch: {
    clearScreen: false
  }
};

Answer 1

肯定可以将生成的 CSS 文件嵌入到您的 HTML 中，至少可以使用一些相当简单的自定义插件。

但是，如果您的 Svelte 组件中只有 CSS，也就是说您的代码中没有 import 'whatever.css'，您可以只依赖 Svelte 注入 CSS从已编译的 JS 代码中提取并完成它。

这在性能方面损失了一点，因为这种注入 CSS 永远不会被浏览器缓存，但它避免了与自定义构建步骤相关的增加的复杂性/风险/耦合......这在您希望将所有应用程序放在一个 HTML 文件中的情况下，性能的种类通常并不那么重要。

要启用此功能，请在 Svelte 插件上设置 emitCss: false：

  plugins: [
    svelte({
      emitCss: false,
      ...
    }),
    ...
  ],
  ...

在这种情况下，CSS 不需要任何 Rollup 插件。

汇总：单个 html 输出

Rollup : single html output

html

javascript

rollup

livereload

svelte