vite.config.ts

/*
 * @Author: dushuai
 * @Date: 2023-05-25 15:46:39
 * @LastEditors: dushuai
 * @LastEditTime: 2023-06-01 15:23:57
 * @description: 心平气和
 */
import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'
import { build, defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts'
import libcss from 'vite-plugin-libcss'

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  const env: Record<string, string> = loadEnv(mode, process.cwd(), '') // 环境变量
  const isProd: boolean = env.VITE_APP_ENV === 'production'


  const BuildConfig = {}
  if (isProd) {
    BuildConfig['lib'] = {// 构建为库。如果指定了 build.lib，build.cssCodeSplit 会默认为 false。
      // __dirname的值是vite.config.ts文件所在目录
      entry: resolve(__dirname, 'packages/index.ts'),  // entry是必需的，因为库不能使用HTML作为入口。
      name: 'DanmakuVue', // 暴露的全局变量
      fileName: 'danmaku-vue' // 输出的包文件名，默认是package.json的name选项
    }

    BuildConfig['rollupOptions'] = { // 自定义底层的Rollup打包配置
      // https://rollupjs.org/configuration-options/
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // format: 'es', // 默认es，可选 'amd' 'cjs' 'es' 'iife' 'umd' 'system'
        exports: 'named', // https://rollupjs.org/configuration-options/#output-exports
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }

  return {
    plugins: [
      vue(),
      isProd && dts({ include: './packages/danmaku' }),
      isProd && libcss()
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },

    server: {
      port: 5173,
      host: '0.0.0.0', // 使用ip能访问
      open: true,
      https: false,
      hmr: true, // hmr热更新
      strictPort: false, // 为true若端口已被占用则会直接退出
    },

    base: env.VITE_APP_RESOURCE_URL,

    build: {
      ...BuildConfig,

      cssCodeSplit: true,
      // lib: {// 构建为库。如果指定了 build.lib，build.cssCodeSplit 会默认为 false。
      //   // __dirname的值是vite.config.ts文件所在目录
      //   entry: resolve(__dirname, 'packages/index.ts'),  // entry是必需的，因为库不能使用HTML作为入口。
      //   name: 'DanmakuVue', // 暴露的全局变量
      //   fileName: 'danmaku-vue' // 输出的包文件名，默认是package.json的name选项
      // },
      // rollupOptions: { // 自定义底层的Rollup打包配置
      //   // https://rollupjs.org/configuration-options/
      //   // 确保外部化处理那些你不想打包进库的依赖
      //   external: ['vue'],
      //   output: {
      //     // format: 'es', // 默认es，可选 'amd' 'cjs' 'es' 'iife' 'umd' 'system'
      //     exports: 'named', // https://rollupjs.org/configuration-options/#output-exports
      //     // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
      //     globals: {
      //       vue: 'Vue'
      //     }
      //   }
      // },
      /** 设置为 false 可以禁用最小化混淆，或是用来指定使用哪种混淆器。
          默认为 Esbuild，它比 terser 快 20-40 倍，压缩率只差 1%-2%。
          注意，在 lib 模式下使用 'es' 时，build.minify 选项不会缩减空格，因为会移除掉 pure 标注，导致破坏 tree-shaking。
          当设置为 'terser' 时必须先安装 Terser。（yarn add terser -D）
      */
      minify: 'terser', // Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效
      terserOptions: { // 在打包代码时移除 console、debugger 和 注释
        compress: {
          /* (default: false) -- Pass true to discard calls to console.* functions.
            If you wish to drop a specific function call such as console.info and/or
            retain side effects from function arguments after dropping the function
            call then use pure_funcs instead
          */
          drop_console: true, // 生产环境时移除console
          drop_debugger: true
        },
        format: {
          comments: false // 删除注释comments
        }
      }
    }
  }
})