如何将 Create React App 捆绑到单个 embed.js 文件中以嵌入到任何网站中？

Question

我正在使用 Vite 开发 React 应用程序，我想创建一个 embed.js 文件，我可以将其包含在任何网站中以加载我的小部件。 embed.js 文件应包含 JavaScript 和 CSS。我正在使用 vite-plugin-css-injected-by-js 插件通过 JavaScript 注入 CSS。

我尝试过的：

附上截图，

我尝试过这个，

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';

export default defineConfig({
  plugins: [
    react(),
    cssInjectedByJsPlugin()
  ]
});

Answer 1

@阿尔伯特杜格巴

我通过在 vite React 应用程序上尝试这个找到了解决方案，我在其中使用 tailwind css，然后使用 tailwind css 类使用 JS 文件的缩小版本进行构建， 看我的 vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";

export default defineConfig({
  plugins: [
    react(),
    cssInjectedByJsPlugin({
      relativeCSSInjection: true,
    }),
  ],
  build: {
    rollupOptions: { output: { manualChunks: undefined } },
    minify: true,
  },
  server: {
    host: "localhost",
    port: 3000,
  },
});