使用Vite将JS和CSS捆绑到一个文件中

nkhmeac6  于 2022-12-27  发布在  其他
关注(0)|答案(6)|浏览(1029)

我花了很长时间才弄明白如何在我的Svelte项目中从Vite构建一个.js文件,其中包括我的Svelte项目中所有构建的javascript和CSS。默认情况下,Vite将应用程序捆绑成一个html文件(这是可以的),两个.js文件(为什么??)和一个.css文件(只是希望将其捆绑成一个js文件)。
我运行了这个非常基本的命令来获得一个入门项目:
第一个月
我试着添加了几个插件,但没有一个达到我想要的效果。主要是,我发现的插件似乎想创建一个包含所有内容的HTML文件。看起来PostCSS可能会有所帮助,但我不知道我可以通过Vite设置什么配置来让它做我想要的事情。
什么是神奇的插件和配置集,将输出一个单一的HTML文件与一个单一的js文件,呈现我的苗条的应用程序和它的CSS到页面?

3zwjbxry

3zwjbxry1#

两步,

最终结果,

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

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

u7up0aaq2#

我为这个问题创建了一个样板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'
    }
  }
})
9bfwbjaz

9bfwbjaz3#

如果您正在寻找一个解决方案,您可能需要看看vite-plugin-singlefile

waxmsbnn

waxmsbnn4#

这并不是vite的开箱即用,但是你可以编写一个快速插件来完成这个任务

const bundle_filename = ''
const css_filename = 'style.css'

defineConfig({
  build: {
    lib: {
      entry: 'src/mycomponent.js',
      name: 'mycomponent.js',
      fileName: () => 'mycomponent.js',
      formats: ['iife'],
    },
    cssCodeSplit: false,
    rollupOptions: {
      plugins: [
        {
          apply: 'build',
          enforce: 'post',
          name: 'pack-css',
          generateBundle(opts, bundle) {
            const {
              [css_filename]: { source: rawCss },
              [bundle_filename]: component,
            } = bundle

            const IIFEcss = `
            (function() {
              try {
                  var elementStyle = document.createElement('style');
                  elementStyle.innerText = ${JSON.stringify(rawCss)}
                  document.head.appendChild(elementStyle)
              } catch(error) {
                console.error(error, 'unable to concat style inside the bundled file')
              }
            })()`

            component.code += IIFEcss

            // remove from final bundle
            delete bundle[css_filename]
          },
        },
      ],
    },
  },
})
y3bcpkx1

y3bcpkx15#

我遇到了同样的问题,并能够通过编辑vite.config.ts修复,如下所示,在vite@2.3.8上测试

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
};
bqjvbblv

bqjvbblv6#

如果使用的是Svelte,则可以使用emitCss

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

相关问题