使用 Vite 将 JS 和 CSS 打包成一个文件

Question

我有一段时间想弄清楚如何在我的 Svelte 项目中从 Vite 构建单个 .js 文件，其中包括我的 Svelte 项目中所有已构建的 javascript 和 CSS。默认情况下，Vite 将应用程序打包成一个 html 文件（这没问题）、两个 .js 文件（为什么？？）和一个 .css 文件（只希望将其打包到一个 js 文件中）。

我运行了这个非常基本的命令来获得一个入门项目：

npx degit sveltejs/template myproject

我尝试添加几个插件，但我添加的任何插件都没有达到我想要的结果。首先，我发现的插件似乎想要创建一个包含所有内容的单个 HTML 文件。看起来 PostCSS 可能会有所帮助，但我不明白我可以通过 Vite 设置什么配置来让它做我想做的事。

什么神奇的插件和配置集可以输出单个 HTML 文件和单个 js 文件，将我的 Svelte 应用程序及其 CSS 呈现到页面上？

原文由 ringmaster 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

两步，

• 我们可以使用 vite-plugin-css-injected-by-js 将 css 注入 js 资产。
• 我们可以通过在 rollup 的配置中禁用块来发出单个 js 资产。

最后结果，

 import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";

export default defineConfig({
  plugins: [cssInjectedByJsPlugin()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
});

原文由 aryzing 发布，翻译遵循 CC BY-SA 4.0 许可协议