使用VITE将JS和CSS捆绑到单个文件中 [英] Bundle JS and CSS into single file with Vite

问题描述

我正在苦苦思索如何在我的Svelte项目中从vite构建一个.js文件，其中包括从我的Svelte项目构建的所有Java脚本和CSS。默认情况下，Vite将应用程序捆绑到一个html文件(这没问题)、两个.js文件(为什么？？)和一个.css文件(只希望将其捆绑到一个js文件中)。

我运行了这个非常基本的命令来获得一个启动项目： npx degit sveltejs/template myproject

我尝试添加了几个插件，但添加的插件都没有达到我想要的效果。首先，我发现的插件似乎想要创建一个包含所有内容的单独的HTML文件。Postcss似乎能帮上忙，但我不明白我可以通过VITE设置什么配置来让它做我想做的事情。

有什么神奇的插件和配置可以输出一个包含一个js文件的HTML文件，从而将我的Svelte应用程序及其css呈现到页面上？

推荐答案

我为此问题创建了一个样板VITE项目：
https://github.com/mvsde/svelte-micro-frontend

也许配置对您的案例有帮助：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [
    svelte({
      emitCss: false
    })
  ],

  build: {
    assetsDir: '',
    sourcemap: true,
    lib: {
      entry: 'src/main.js',
      formats: ['iife'],
      name: 'SvelteMicroFrontend',
      fileName: 'svelte-micro-frontend'
    }
  }
})

这篇关于使用VITE将JS和CSS捆绑到单个文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！