import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from 'path'
import VitePluginExternals from "./plugins/vite-plugin-externals";
import visualizer from "rollup-plugin-visualizer";

const resolve = (filePath: string) => path.resolve(__dirname, './', filePath)

const config = {
    title: 'Vue Vite子应用',                                     // 单页面应用title
    APP_NAME: 'PLAIN_SUB_VUE_VITE_APPLICATION',                 // 每个应用的唯一标识，没有格式限制，只能用下划线命名，因为最后会输出为一个变量名
    publicPath: '/template-plain-react-micro-sub-vue-vite/',    // 部署路径
    port: 3125,
    remoteOrigin: 'http://martsforever-demo.gitee.io',
}

const outDir = 'docs'

// https://vitejs.dev/config/
export default defineConfig({
    server: {
        port: config.port,

        // https://vitejs.cn/config/#server-origin
        // 设置静态资源的访问路径为完整前缀
        origin: `http://localhost:${config.port}`,
    },
    base: process.env.NODE_ENV === 'production' ? config.remoteOrigin + config.publicPath : config.publicPath,
    // base: '/',
    plugins: [
        vueJsx({}),
        vue(),
        VitePluginExternals({vue: 'Vue', react: 'React', 'react-dom': 'ReactDOM'}),
    ],
    build: {
        outDir: outDir,
        rollupOptions: {
            // 确保外部化处理那些你不想打包进库的依赖
            /*external: ['react', 'react-dom'],
            output: {
                // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
                globals: {
                    react: 'React',
                    'react-dom': 'ReactDOM',
                }
            },*/
            input: {
                main: resolve('index.html'),
                config: resolve('config.html')
            },
            plugins: [
                process.env.NODE_ENV === 'production' ? visualizer({
                    filename: `${outDir}/report.html`,
                    title: '',
                    sourcemap: true,
                    open: true,
                }) as any : null,
            ].filter(Boolean),
        }
    },
})