vue-vben-admin 解析四之 vite.config.ts 分析（1）

初学vue3-demo:https://github.com/Miofly/vue3-vite-vuex-demo
vite.config.ts 是 vite 的配置文件，下面将对 vite.config.ts 进行逐步分析

/**
 * @description 拼接路径
 * @author wfd
 * @date 2021/10/8 11:06
 * @example  process.cwd() 返回 Node.js 进程的当前工作目录
 * @param dir 要拼接的路径
 */
function pathResolve(dir: string) {
  return resolve(process.cwd(), '.', dir);
}

/** 从 package.json 文件中拿到一些字段的信息 */
const { dependencies, devDependencies, name, version } = pkg;

/** 将从 package.json 文件中拿到的信息组装起来作为 __APP_INFO__ */
const __APP_INFO__ = {
  pkg: { dependencies, devDependencies, name, version },
  lastBuildTime: moment().format('YYYY-MM-DD HH:mm:ss'),
};

/**
 * @description vite 配置
 * @author wfd
 * @date 2021/10/8 14:59
 * @example
 * @param command 命令 serve or build
 * @param mode 运行模式
 */
export default ({ command, mode }: ConfigEnv): UserConfig => {
  const root = process.cwd();

  /**
   * @description 检查process.cwd()路径下.env.development.local、.env.development、.env.local、.env这四个环境文件。
     输出NODE_ENV和VITE_开头的键值对。
     VITE_开头的键值对后面的不会覆盖前面的。
     NODE_ENV的值后面的会覆盖前面的。
   * @author wfd
   * @date 2021/10/8 10:17
   * @example
   */
  const env = loadEnv(mode, root);
  /**
	 * @example 获取到的 env 变量示例如下
	   {
		   VITE_USE_MOCK: 'true',
		   VITE_PUBLIC_PATH: '/',
		   VITE_PROXY: '[["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]',
		   VITE_DROP_CONSOLE: 'false',
		   VITE_GLOB_API_URL: '/basic-api',
		   VITE_GLOB_UPLOAD_URL: '/upload',
		   VITE_GLOB_API_URL_PREFIX: '',
		   VITE_PORT: '3100',
		   VITE_GLOB_APP_TITLE: 'Vben Admin',
		   VITE_GLOB_APP_SHORT_NAME: 'vue_vben_admin'
		 }
	 */

  // 将上述的字符串转换成了 布尔值、数值、数组等，
  const viteEnv = wrapperEnv(env);
  /**
   * @example wrapperEnv 转换后的 viteEnv 变量示例如下
     {
        VITE_USE_MOCK: true,
        VITE_PUBLIC_PATH: '/',
        VITE_PROXY: [
          [ '/basic-api', 'http://localhost:3000' ],
          [ '/upload', 'http://localhost:3300/upload' ]
        ],
        VITE_DROP_CONSOLE: false,
        VITE_GLOB_API_URL: '/basic-api',
        VITE_GLOB_UPLOAD_URL: '/upload',
        VITE_GLOB_API_URL_PREFIX: '',
        VITE_PORT: 3100,
        VITE_GLOB_APP_TITLE: 'Vben Admin',
        VITE_GLOB_APP_SHORT_NAME: 'vue_vben_admin'
     }
   */

  const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE } = viteEnv;

  // 判断是否为打包命令
  const isBuild = command === 'build';

中间用到的 wrapperEvn 函数分析如下

/**
 * @description 转换从 .env 文件中获取的对象
 * @author wfd
 * @date 2021/10/8 09:30
 * @param envConf
 */
export function wrapperEnv(envConf: Recordable): ViteEnv {
  // 创建一个对象来存储转换的键值
  const ret: any = {};

  /**
   * @description wrapperEnv
   * @author wfd
   * @date 2021/10/8 14:19
   * @example
   * Object.keys(envConf) = [
        'VITE_USE_MOCK',
        'VITE_PUBLIC_PATH',
        'VITE_PROXY',
        'VITE_DROP_CONSOLE',
        'VITE_GLOB_API_URL',
        'VITE_GLOB_UPLOAD_URL',
        'VITE_GLOB_API_URL_PREFIX',
        'VITE_PORT',
        'VITE_GLOB_APP_TITLE',
        'VITE_GLOB_APP_SHORT_NAME'
     ]
   */
  for (const envName of Object.keys(envConf)) {
    /**
     * @description
       realName 是每一个配置对应的 value
       中间的正则替换就是将\\n替换成\n。
       console.log('asda\\\n\\n\n'.replace(/\n/g, '\n')) =>asda\ [回车\n] \n [回车\n]
       console.log('asda\\\n\\n\n'.replace(/\\n/g, '\n'))=>asda\ [回车\n] [回车\n] [回车\n]
       console.log('asda\\\n\\n\n'.replace(/\\\n/g, '\n'))=>asda [回车\n] \n [回车\n]
     */
    let realName = envConf[envName].replace(/\\n/g, '\n');
    // 将 'true' 或者 'false' 的字符串转换为 boolean 对应的 true 或者 false
    realName = realName === 'true' ? true : realName === 'false' ? false : realName;

    // 端口转换成 number 类型
    if (envName === 'VITE_PORT') {
      realName = Number(realName);
    }

    // 将代理配置转换成数组
    if (envName === 'VITE_PROXY' && realName) {
      try {
        realName = JSON.parse(realName.replace(/'/g, '"'));
      } catch (error) {
        realName = '';
      }
    }
    // 将转换后的属性值 realName 赋值给 ret 对应的每一个键
    ret[envName] = realName;

    // 将原始的值也就是未转换的值赋值给 process.env
    if (typeof realName === 'string') {
      process.env[envName] = realName;
    } else if (typeof realName === 'object') {
      process.env[envName] = JSON.stringify(realName);
    }
  }

  return ret;
}