test-tw-publish/vite.config.ts

描述

/*
 * @Description:
 * @Version: 1.0.0
 * @Autor: zenghaoming
 * @Date: 2023-04-22 08:34:34
 * @LastEditors: zenghaoming
 * @LastEditTime: 2023-11-06 17:59:06
 */
// http://www.javashuo.com/article/p-vzwvqopt-vn.html
import { defineConfig, PluginOption, loadEnv } from "vite";
import dts from "vite-plugin-dts";
import { resolve } from "path";
// 代码压缩
import { terser } from "rollup-plugin-terser";

// 打包模式
const _getOutPut = (format: string) => {
  // file：出口的地址以及打包的名字
  // format：打包的格式，格式分为五种分别为：amd / es / cjs / iife / umd
  // name：当 format 为 iife 和 umd 时必须提供，将作为全局变量挂在window(浏览器环境)下
  // sourcemap：生成 main.map.js 文件，方便调试
  // banner：为打包好的文件添加注释，注释的位置在整个文件的首行
  // footer：为打包好的文件添加注释，注释的位置在整个文件的尾行
  // intro：为打包好的文件添加注释，注释的位置在打包数据内容的头部
  // outro：为打包好的文件添加注释，注释的位置在打包数据内容的末尾
  const config = [
    {
      // 打包格式
      format: "es", // export，amd / es / cjs / iife / umd
      // 打包后文件名
      entryFileNames: "[name].js",
      // 让打包目录和我们目录对应
      // preserveModules: true,
      exports: "named",
      // 配置打包根目录
      dir: resolve(__dirname, "./dist"),
    },
    {
      format: "cjs", // module.exports=c
      entryFileNames: "[name].min.js",
      exports: "named",
      // dir: resolve(__dirname, './dist/lib/cjs'),
      dir: resolve(__dirname, "./dist"),
    },
    {
      format: "umd", // ()()
      name: "$TwSip", // 当format为iife和umd时必须提供，将作为全局变量挂在window(浏览器环境)下
      entryFileNames: "[name].min.js",
      // dir: resolve(__dirname, './dist/lib/umd'),
      dir: resolve(__dirname, "./dist"),
    },
  ];
  return [config.find((item) => item.format === format)];
};

// 打包要排除的文件
const _getExternal = (format: string) => {
  const config: any = {
    es: ["sip.js"],
    umd: [],
  };
  return ["vue", ...config[format]];
};

// 打包插件
const _getPlugins = (format: string) => {
  const config: any = {
    umd: [],
    es: [
      dts({
        skipDiagnostics: true,
        // 指定使用的tsconfig.json为我们整个项目根目录下,如果不配置,你也可以在components下新建tsconfig.json
        tsConfigFilePath: resolve(__dirname, "./tsconfig.json"),
      }),
    ],
  };
  return [terser() as PluginOption, ...config[format]];
};

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  const buildMode = env.BUILD_MODE;
  return {
    build: {
      // 压缩
      minify: "esbuild", //
      // minify: false, //
      terserOptions: {
        compress: {
          keep_infinity: true,
          // 用于删除生产环境中的console
          // drop_console: VITE_DROP_CONSOLE,
        },
      },
      rollupOptions: {
        // 忽略打包vue文件
        // external: ['vue'],
        external: _getExternal(buildMode), // 当采用script引入的时候最好吧sip.js打包进去
        output: _getOutPut(buildMode) as any,
      },
      lib: {
        entry: resolve(__dirname, "src/index.ts"),
        // name: 'index.js',
        // fileName: 'index',
        // es=>export  umd=> ()() cjs=>module.exports=c;
        // formats: ['es', 'umd', 'cjs'],
        // formats: ['es'],
      },
    },
    esbuild: {
      drop: [],
    },
    plugins: _getPlugins(buildMode),
  };
});