CryptoPanel/vite.config.ts at main · TsaiKoga/CryptoPanel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import { copyFileSync, mkdirSync, existsSync, readFileSync, writeFileSync, readdirSync } from 'fs';

// 插件：自动在 HTML 中注入 CSS 链接
function injectCSSPlugin() {
  return {
    name: 'inject-css',
    enforce: 'post',
    closeBundle() {
      const distDir = 'dist';
      if (!existsSync(distDir)) {
        console.warn('[inject-css] dist directory does not exist');
        return;
      }

      // 查找所有 CSS 文件
      const cssFiles: string[] = [];
      const assetsDir = path.join(distDir, 'assets');

      if (existsSync(assetsDir)) {
        const files = readdirSync(assetsDir, { withFileTypes: true });
        for (const file of files) {
          if (file.isFile() && file.name.endsWith('.css')) {
            cssFiles.push(file.name);
            console.log(`[inject-css] Found CSS file: ${file.name}`);
          }
        }
      }

      // 如果使用固定文件名，检查是否存在
      if (cssFiles.length === 0 && existsSync(path.join(assetsDir, 'style.css'))) {
        cssFiles.push('style.css');
        console.log('[inject-css] Using style.css');
      }

      if (cssFiles.length === 0) {
        console.warn('[inject-css] No CSS files found in assets directory');
      }

      // 更新 HTML 文件
      const htmlFiles = ['popup.html', 'options.html'];
      for (const htmlFile of htmlFiles) {
        const htmlPath = path.join(distDir, htmlFile);
        if (existsSync(htmlPath)) {
          let htmlContent = readFileSync(htmlPath, 'utf-8');

          // 移除旧的 CSS 链接（如果有）
          htmlContent = htmlContent.replace(/<link[^>]*\.css[^>]*>/gi, '');

          // 在 </head> 之前注入 CSS 链接（使用相对路径）
          if (cssFiles.length > 0) {
            const cssLinks = cssFiles
              .map(css => `  <link rel="stylesheet" href="assets/${css}">`)
              .join('\n');

            if (htmlContent.includes('</head>')) {
              htmlContent = htmlContent.replace(
                '</head>',
                `${cssLinks}\n</head>`
              );
            } else {
              // 如果没有 </head>，在 <head> 后面添加
              htmlContent = htmlContent.replace(
                '<head>',
                `<head>\n${cssLinks}`
              );
            }

            console.log(`[inject-css] Injected CSS into ${htmlFile}`);
          }

          writeFileSync(htmlPath, htmlContent, 'utf-8');
        } else {
          console.warn(`[inject-css] HTML file not found: ${htmlPath}`);
        }
      }
    },
  };
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    {
      name: 'copy-manifest',
      closeBundle() {
        // Copy manifest.json to dist
        if (!existsSync('dist')) {
          mkdirSync('dist', { recursive: true });
        }
        copyFileSync('manifest.json', 'dist/manifest.json');

        // Copy HTML files
        if (existsSync('public/popup.html')) {
          copyFileSync('public/popup.html', 'dist/popup.html');
        }
        if (existsSync('public/options.html')) {
          copyFileSync('public/options.html', 'dist/options.html');
        }

        // Copy icons if they exist
        ['icon16.png', 'icon48.png', 'icon128.png'].forEach(icon => {
          if (existsSync(`public/${icon}`)) {
            copyFileSync(`public/${icon}`, `dist/${icon}`);
          }
        });
      },
    },
    injectCSSPlugin(),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  css: {
    postcss: './postcss.config.mjs',
  },
  build: {
    outDir: 'dist',
    cssCodeSplit: false,
    cssMinify: false, // 暂时关闭压缩，方便调试
    rollupOptions: {
      input: {
        popup: path.resolve(__dirname, 'src/popup.tsx'),
        options: path.resolve(__dirname, 'src/options.tsx'),
        background: path.resolve(__dirname, 'src/background.ts'),
      },
      output: {
        entryFileNames: (chunkInfo) => {
          return chunkInfo.name === 'background' ? 'background.js' : '[name].js';
        },
        chunkFileNames: 'chunks/[name]-[hash].js',
        assetFileNames: (assetInfo) => {
          // CSS 文件使用固定名称，方便 HTML 引用
          if (assetInfo.name && assetInfo.name.endsWith('.css')) {
            return 'assets/style.css';
          }
          return 'assets/[name]-[hash].[ext]';
        },
      },
    },
    emptyOutDir: true,
  },
  define: {
    'process.env': {},
  },
});