declare const PROD: boolean;
declare const DEV: boolean;
declare const TEST: boolean;

const isProd = process.env.NODE_ENV === 'production' // 生产环境
const isDev = process.env.NODE_ENV === 'development' // 开发环境
const isTest = process.env.NODE_ENV === 'test' // 测试环境

plugins: [
    terser({ // 压缩JS的插件
        compress: {
            sequences: isProd, // 生产环境下删除连续语句
            arguments: isProd, // 生产环境下删除函数参数
            drop_console: isProd && ['log'], // 生产环境下删除 console.log 语句
            drop_debugger: isProd, // 生产环境下删除 debugger 语句
            passes: isProd ? 4 : 1, // 生产环境下进行 4 次压缩，开发环境下进行 1 次压缩
            global_defs: { // 定义全局变量，用于在压缩代码时进行条件编译
                '@DEV': JSON.stringify(isDev),
                '@PROD': JSON.stringify(isProd),
                '@TEST': JSON.stringify(isTest),
            },
        },
        ......
],

const cliOptions = {
    port: 5000,
    open: true,
    host: true
}

export default defineConfig({
    plugins: [vue()],
    server: {
        port: 3000,
        open: true
    }
})

const configFromFile = {
    plugins: [vuePlugin],
    server: {
        port: 3000,
        open: false
    }
}

const mergedConfig = {
    plugins: [vuePlugin],
    server: {
        port: 5000,
        open: true,
        host: true 
    }
}

// 自定义插件
const myPlugin = {
    name: 'my-plugin',
    config(config, env) { // config 钩子；config 已经是当前合并后的配置；env 就是之前说的备忘录（process.env）
        console.log('当前 mode:', env.mode) // 'development'
        
        return { // 修改配置（二次封装）
            server: {
                ...config.server, // 展开已有 server 配置
                proxy: { // 新增 proxy
                    '/api': 'http://localhost:8080'
                }
            },
            define: { // 新增全局常量
                __MY_APP_VERSION__: JSON.stringify('1.0.0')
            }
        }
    }
}

const afterPluginConfig = {
    plugins: [vuePlugin],
    server: {
        port: 5000,
        open: true,
        host: true,
        proxy: {
            '/api': 'http://localhost:8080'
        }
    },
    define: {
        __MY_APP_VERSION__: '"1.0.0"'
    }
}

const myPlugin = {
    name: 'my-plugin',
    config(config, env) {
        console.log('当前 mode:', env.mode)
        
        return {
            server: {
                ...config.server,
                proxy: {
                    '/api': 'http://localhost:8080'
                }
            },
            define: {
                __MY_APP_VERSION__: JSON.stringify('1.0.0')
            }
        }
    }
    configResolved(resolvedConfig) { // configResolved 钩子（只读）；resolvedConfig 就是最终确定的配置
        const { server, define, plugins } = resolvedConfig // 解构赋值

        if (server.port === 5000) {
            console.log('服务器在 5000 端口启动')
        }

        if (define.__MY_APP_VERSION__) {
            this.version = define.__MY_APP_VERSION__
        }

        // 不能修改
        // resolvedConfig.server.port = 6000 // 无效
    }
}

apply: 'serve'     // 只在开发模式（dev）启用

const mockPlugin = {
    name: 'vite-plugin-mock',
    apply: 'serve', // 只在 pnpm dev 时生效
    configureServer(server) {
        // 在开发服务器上注册 mock 接口
        server.middlewares.use('/api/users', (req, res) => {
            res.end(JSON.stringify([{ id: 1, name: 'John' }]))
        })
    }
}

apply: 'build'     // 只在构建模式启用

const compressPlugin = {
    name: 'vite-plugin-compress',
    apply: 'build', // 只在 pnpm build 时生效
    closeBundle() {
        // 构建完成后，对 dist 目录进行 gzip 压缩
        execSync('gzip -r dist/')
    }
}

// vite.config.ts
export default defineConfig({
    plugins: [
        mockPlugin(), 
        reactPlugin(), 
        legacyPlugin(),
        myCustomPlugin()
    ]
})

const mockPlugin = {
    name: 'vite-plugin-mock',
    configureServer(server) { // 向 Vite 的服务器注册 server
        // 有人请求了 /api/users
        server.middlewares.use('/api/users', (req, res, next) => { // middlewares 是 Connect 的中间件容器
            res.writeHead(200, { 'Content-Type': 'application/json' })
            res.end(
                JSON.stringify([
                    { id: 1, name: 'Alice' },
                    { id: 2, name: 'Bob' }
                ])
            )
            // 没有 next()，请求被拦截
        })
        
        // 或是记录日志，不做操作
        server.middlewares.use('/api/*', (req, res, next) => {
            console.log('拦截所有 /api/ 开头的请求')
            next() // 放行，交给下一个处理
        })
    }
}

// Vite 内部调用
const resolved = await pluginContainer.resolveId('./App.vue')

// Vite 内部调用
const code = await pluginContainer.load('/project/src/App.vue')
// 返回：'<script>...<\/script><template>...<\/template>'

// Vite 内部调用
let result = code // 你的代码
for (const plugin of plugins) {
    if (plugin.transform) {
        result = await plugin.transform(result, id)
    }
}

// 返回给浏览器的内容
export const render = function render(_ctx, _cache) {
    return (_openBlock(), _createBlock("div", null, [
        _createTextVNode("Count: " + _toDisplayString(_ctx.count), 1)
    ]))
}

const watcher = chokidar.watch(root, { ... }) // Vite 使用 chokidar 监听文件

watcher.on('change', async (file) => { // file: /project/src/App.vue
    const modules = moduleGraph.getModulesByFile(file) // moduleGraph 是 Vite 内存中的“依赖图”，记录着谁 import 了谁；现在modules代表所有依赖这个file文件的模块
    updateModules(file, modules) // 触发更新
})

function updateModules(file, modules) {
    const updates = []
    for (const mod of modules) {
        updates.push({
            type: 'update',        // 更新类型
            path: mod.url,         // 如 /src/App.vue
            timestamp: Date.now()
        })
    }
    
    ws.send({ // 通过 WebSocket 广播
        type: 'update',
        updates
    })
}

ws.onmessage = (event) => {
    const data = JSON.parse(event.data)
    if (data.type === 'update') {
        data.updates.forEach((update) => {
            // 发起新的 HTTP 请求，带时间戳防止缓存
            fetchUpdate(update.path, update.timestamp)
        })
    }
}

async function fetchUpdate(path, timestamp) {
    // 请求新的模块内容
    const response = await fetch(`${path}?t=${timestamp}`)
    const code = await response.text()

    // 创建一个模块对象
    const mod = {
        id: path,
        code,
        getters: [] // 用于 HMR accept
    }

    // 调用 hot.accept
    const { hot } = import.meta
    hot.accept(path, (newMod) => {
        // 这里是真正的“热替换”发生的地方
        console.log('模块已更新:', path)
    })
}