GoodProtocolUI/vite.config.ts at master · GoodDollar/GoodProtocolUI · 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
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import viteTsconfigPaths from 'vite-tsconfig-paths'
import svgrPlugin from 'vite-plugin-svgr'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
import { lingui } from '@lingui/vite-plugin'
import dynamicImports from 'vite-plugin-dynamic-import'
import { visualizer } from 'rollup-plugin-visualizer'
import dotenv from 'dotenv'
import * as esbuild from 'esbuild'

dotenv.config()

import fs from 'fs'
import path from 'path'
// import { visualizer } from 'rollup-plugin-visualizer'

// https://vitejs.dev/config/

let https: any
if (process.env.HTTPS === 'true') {
    https = {
        key: fs.readFileSync(process.env.SSL_KEY_FILE as any),
        cert: fs.readFileSync(process.env.SSL_CRT_FILE as any),
    }
} else {
    https = false
}

const jsxTransform = (matchers: RegExp[]) => ({
    name: 'js-in-jsx',
    load(id: string) {
        if (matchers.some((matcher) => matcher.test(id)) && id.endsWith('.js')) {
            const file = fs.readFileSync(id, { encoding: 'utf-8' })
            return esbuild.transformSync(file, { loader: 'jsx', jsx: 'transform' })
        }
    },
})

export default defineConfig(({ command, mode }) => {
    process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }
    return {
        envPrefix: 'REACT_APP_',
        server: {
            https,
        },
        plugins: [
            visualizer({
                template: 'treemap', // or sunburst
                open: false,
                gzipSize: true,
                brotliSize: true,
                filename: 'analice.html',
            }),
            dynamicImports(), //for lingui dynamic import lang files
            // checker({
            //     // e.g. use TypeScript check
            //     typescript: true,
            // }),
            nodePolyfills({
                protocolImports: true,
                exclude: ['constants', 'crypto'],
                globals: {
                    Buffer: true,
                    global: true,
                    process: true,
                },
            }),
            react({
                babel: {
                    plugins: ['macros'],
                },
            }),
            lingui(),
            viteTsconfigPaths(),
            svgrPlugin(),
            jsxTransform([/node_modules[\\/]@ronradtke[\\/]react-native-markdown-display[\\/].*\.js$/]),
        ],
        resolve: {
            alias: {
                'react-native': 'react-native-web',
                'react-native-svg': 'react-native-svg-web',
                'react-native-webview': 'react-native-web-webview',
                'lottie-react-native': 'react-native-web-lottie',
                '@react-native-clipboard/clipboard': 'react-native-web-clipboard',
                jsbi: path.resolve(__dirname, '.', 'node_modules', 'jsbi', 'dist', 'jsbi-cjs.js'), // https://github.com/Uniswap/sdk-core/issues/20#issuecomment-1559863408
            },
            dedupe: ['react', 'ethers', 'react-dom', 'native-base'],
        },
        build: {
            commonjsOptions: {
                transformMixedEsModules: true, //handle deps that use "require" and "module.exports"
            },
        },
        define: {
            'process.browser': true,
            'process.env': process.env,
        },
        optimizeDeps: {
            include: ['@ronradtke/react-native-markdown-display'],
            esbuildOptions: {
                loader: {
                    '.html': 'text', // allow import or require of html files
                },
            },
        },
    }
})