light-blue-react/vite.config.js at master · flatlogic/light-blue-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
101
102
103
104
105
106
107
import path from 'node:path';
import { defineConfig, loadEnv, transformWithEsbuild } from 'vite';
import react from '@vitejs/plugin-react-swc';

const SRC_DIR = path.resolve(__dirname, 'src');
const SRC_ALIAS_DIRS = [
  'actions',
  'components',
  'core',
  'documentation',
  'fonts',
  'images',
  'pages',
  'reducers',
  'styles',
];

function createSourceAliases() {
  const aliases = [{ find: 'config', replacement: path.resolve(SRC_DIR, 'config.js') }];

  for (const dir of SRC_ALIAS_DIRS) {
    aliases.push(
      { find: dir, replacement: path.resolve(SRC_DIR, dir) },
      { find: new RegExp(`^${dir}/(.*)$`), replacement: `${path.resolve(SRC_DIR, dir)}/$1` },
    );
  }

  return aliases;
}

function transformJsAsJsx() {
  return {
    name: 'transform-js-as-jsx',
    async transform(code, id) {
      if (!/\/src\/.*\.js$/.test(id)) {
        return null;
      }

      return transformWithEsbuild(code, id, {
        loader: 'jsx',
        jsx: 'automatic',
      });
    },
  };
}

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  const publicUrl = env.PUBLIC_URL || './';
  const backendFlag = env.VITE_BACKEND || '';

  return {
    base: './',
    build: {
      outDir: 'build',
    },
    esbuild: {
      loader: 'jsx',
      include: /src\/.*\.js$/,
      exclude: [],
    },
    optimizeDeps: {
      esbuildOptions: {
        loader: {
          '.js': 'jsx',
        },
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          quietDeps: true,
          silenceDeprecations: ['import', 'global-builtin', 'color-functions', 'slash-div', 'if-function', 'abs-percent'],
        },
      },
    },
    server: {
      port: 3000,
    },
    plugins: [
      transformJsAsJsx(),
      react({
        include: /\.[jt]sx?$/,
      }),
    ],
    resolve: {
      alias: [
        { find: /^~(.*)$/, replacement: '$1' },
        { find: 'reactstrap', replacement: path.resolve(SRC_DIR, 'lib/reactstrap/index.js') },
        ...createSourceAliases(),
      ],
    },
    define: {
      __APP_ENV__: JSON.stringify({
        NODE_ENV: mode,
        PUBLIC_URL: publicUrl,
        VITE_BACKEND: backendFlag,
      }),
      'process.env.NODE_ENV': JSON.stringify(mode),
      'process.env.PUBLIC_URL': JSON.stringify(publicUrl),
      'process.env.REACT_APP_BACKEND': JSON.stringify(backendFlag),
    },
    test: {
      environment: 'jsdom',
    },
  };
});