react/vite.config.js at master · duxianwei520/react · 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
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

function jsToJsxPlugin() {
  return {
    name: 'js-to-jsx',
    transform(code, id) {
      if (id.endsWith('.js') && code.includes('<')) {
        return {
          code: code,
          loader: 'jsx'
        }
      }
    }
  }
}

export default defineConfig({
  plugins: [
    jsToJsxPlugin(),
    react({
      include: '**/*.{js,jsx,ts,tsx}',
    }),
  ],
  define: {
    global: 'globalThis',
  },
  root: '.',
  publicDir: 'app/resource',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false,
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'index.html'),
      },
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
          'antd-vendor': ['antd'],
          'redux-vendor': ['@reduxjs/toolkit', 'react-redux'],
        },
      },
    },
  },
  esbuild: {
    loader: 'jsx',
    include: [/\.js$/, /\.jsx$/, /\.tsx$/, /\.ts$/],
    exclude: [],
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
  resolve: {
    alias: {
      '@apis': path.resolve(__dirname, './app/apis'),
      '@configs': path.resolve(__dirname, './app/configs'),
      '@ajax': path.resolve(__dirname, './app/configs/ajax.js'),
      '@config': path.resolve(__dirname, './app/configs/config.js'),
      '@reg': path.resolve(__dirname, './app/configs/regular.config.js'),
      '@components': path.resolve(__dirname, './app/components'),
      '@tableList': path.resolve(__dirname, './app/components/tableList/tableList.js'),
      '@redux/actions': path.resolve(__dirname, './app/redux/actions'),
      '@actions': path.resolve(__dirname, './app/redux/actions'),
      '@images': path.resolve(__dirname, './app/images'),
      '@styles': path.resolve(__dirname, './app/styles'),
      '@pages': path.resolve(__dirname, './app/pages'),
      '@reducers': path.resolve(__dirname, './app/redux/reducers'),
      '@middleware': path.resolve(__dirname, './app/middleware'),
      '@utils': path.resolve(__dirname, './app/utils'),
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          '@primary-color': '#1890ff',
        },
      },
    },
  },
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:1111',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})