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

Question

我正忙着弄清楚如何在我的 Svelte 元素中从 Vite 构建单个 .js 文件，其中包括我的 Svelte 元素中构建的所有 javascript 和 CSS。默认情况下，Vite 将应用程序 bundle 到一个 html 文件(这没关系)、两个 .js 文件(为什么？？)和一个 .css 文件(只是希望将它 bundle 到一个 js 文件中)。
我运行了这个非常基本的命令来获得一个入门元素:npx degit sveltejs/template myproject我尝试添加几个插件，但我添加的任何插件都没有达到我想要的结果。首先，我发现的插件似乎想要创建一个包含所有内容的 HTML 文件。似乎 PostCSS 可能会有所帮助，但我不明白我可以通过 Vite 设置什么配置来让它做我想做的事情。
什么是神奇的插件和配置集，它将输出带有单个 js 文件的单个 HTML 文件，将我的 Svelte 应用程序及其 CSS 呈现到页面上？

Answer 1

两步，

我们可以使用 vite-plugin-css-injected-by-js 将 css 注入(inject)到 js Assets 中。 .

我们可以通过在 rollup 的配置中禁用 block 来发出单个 js Assets 。

最后结果，

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

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