第二十七章-Vben中的wrapperEnv方法

1.说明

原代码也有一段注释：

// The boolean type read by loadEnv is a string. This function can be converted to boolean type
const viteEnv = wrapperEnv(env);

译文如下：

loadEnv读取的布尔类型是一个字符串。该函数可以转换为布尔类型。

2.创建wrapperEnv方法

从这开始涉及到根目录下的build文件夹了。创建该文件夹。我们使用build文件夹装所有关于项目构建类的东西。

2.1.创建定义文件

根目录下的build文件夹创建typeing.d.ts文件。

declare module '*.json' {
  const src: any;
  export default src;
}

declare type Recordable = Record<string, any>;

参考连接：

TS通用模块声明
TS的高级类型Record
允许导入Json这段代码，写在哪都行。TS都会加载到。

2.2.定义Env对象类型

根目录下的build文件夹创建utils.ts文件。

export interface ViteEnv {
  VITE_PORT: number;
  VITE_USE_MOCK: boolean;
  VITE_USE_PWA: boolean;
  VITE_PUBLIC_PATH: string;
  VITE_PROXY: [string, string][];
  VITE_GLOB_APP_TITLE: string;
  VITE_GLOB_APP_SHORT_NAME: string;
  VITE_USE_CDN: boolean;
  VITE_DROP_CONSOLE: boolean;
  VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none';
  VITE_LEGACY: boolean;
  VITE_USE_IMAGEMIN: boolean;
}

导出的这个类型对应了我们配置文件中的Key。

2.3.格式化Env对象的wrapperEnv方法

在utils.ts文件中添加以下方法：

export function wrapperEnv(envConf: Recordable): ViteEnv {
  const ret: any = {};

  for (const envName of Object.keys(envConf)) {
    let realName = envConf[envName].replace(/\\n/g, '\n');
    realName = realName === 'true' ? true : realName === 'false' ? false : realName;

    if (envName === 'VITE_PORT') {
      realName = Number(realName);
    }
    if (envName === 'VITE_PROXY') {
      try {
        realName = JSON.parse(realName);
      } catch (error) {}
    }
    ret[envName] = realName;
    process.env[envName] = realName;
  }
  return ret;
}

代码解释：

中间的正则替换就是将\\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]

3.vite.config.ts文件复盘

自此vite.config.ts，除return里面的东西外，其他的都已经解析完了。以现在可以得到这样一个代码：

import { resolve } from 'path';
import { ConfigEnv, loadEnv, UserConfig } from 'vite';
import { wrapperEnv } from './build/util';

function pathResolve(dir: string) {
  return resolve(__dirname, '.', dir);
}

export default ({ command, mode }: ConfigEnv): UserConfig => {
  const root = process.cwd();

  const env = loadEnv(mode, root);

  const viteEnv = wrapperEnv(env);

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

  const isBuild = command === 'build';

  return {};
};