我正在费尽心思地弄清楚如何在我的 Svelte 项目中从 Vite 构建单个 .js 文件，其中包括我的 Svelte 项目中构建的所有 javascript 和 CSS。默认情况下，Vite 将应用程序捆绑到一个 html 文件（这可以）、两个 .js 文件（为什么？）和一个 .css 文件（只想将其捆绑到一个 js 文件中）。
我运行了这个非常基本的命令来获取入门项目：
npx degit sveltejs/template myproject
我尝试添加几个插件，但我添加的任何一个都没有达到我想要的结果。首先，我发现的插件似乎想要创建一个包含所有内容的 HTML 文件。看起来 PostCSS 可能会有所帮助，但我不明白我可以通过 Vite 设置什么配置来让它执行我想要的操作。
什么是神奇的插件和配置集，它将输出单个 HTML 文件和单个 js 文件，将我的 Svelte 应用程序及其 CSS 渲染到页面上？
两步，
- 我们可以将 css 注入 js 资源中vite-plugin-css-injected-by-js https://github.com/Marco-Prontera/vite-plugin-css-injected-by-js.
- 我们可以通过在 rollup 的配置中禁用块来发出单个 js 资源。
最后结果，
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
export default defineConfig({
plugins: [cssInjectedByJsPlugin()],
build: {
rollupOptions: {
output: {
manualChunks: undefined,
},
},
},
});
正如下面@TheRockerRush 所建议的，您可能想要使用vite-插件-singlefile https://www.npmjs.com/package/vite-plugin-singlefile将所有代码捆绑到单个 .html 文件中，尽管 OP 要求单个 .js 文件。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
