汇总:单个html输出

Question

我正在尝试将我的Svelte应用程序打包到一个Html文件输出中。我成功地获得了基于这个答案的配置所需的输出：Output Single HTML File from Svelte Project

使用"npm“，第一个构建没有问题，但是我遇到了问题：bundle['bundle.css']没有填充我的inlineSvelte的generateBundle函数。

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

这是我的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

当然，在HTML中嵌入生成的CSS文件是可能的，至少可以使用一些相当简单的定制插件。

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

这会降低一些性能，因为这种注入的CSS永远不会被浏览器缓存，但它避免了与自定义构建步骤相关联的额外复杂性/风险/耦合.这种性能在您希望所有应用程序都放在一个HTML文件中的场景中通常不那么重要。

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

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

在这种情况下，您不需要任何CSS的汇总插件。