node + TypeScript 环境变量方案

前言

主要是搞定如何在node+ts环境实现环境变量处理，包括命令携带、本地env文件、以及环境变量类型声明。

教程

命令携带

由于windows端对于命令携带天然弱势，所以我们需要安装一个插件来实现全平台兼容：

pnpm i cross-env

然后在需要环境变量的命令上添加：

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development ts-node ./main.ts",
    "prod": "cross-env NODE_ENV=production ts-node ./main.ts"
  }
}

NODE_ENV=development就是我们设置的环境变量，我们可以在代码中通过process.env.NODE_ENV来获取到。

如果你需要多个环境变量，可以空格后保持相同格式书写，例如：

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development BUILD_TYPE=filter ts-node ./main.ts",
    "prod": "cross-env NODE_ENV=production BUILD_TYPE=filter ts-node ./main.ts"
  }
}

BUILD_TYPE就是我们第二个环境变量，通过process.env.BUILD_TYPE来获取到。

如果我们存在很多环境变量，然后值也很长，比如api的前缀链接，显然命令的方式有些繁琐，会导致命令内容特别之长，所以我们就会需要本地env环境变量文件。

本地env文件

本地env文件需要cross-env进行配合使用，假设现在我们的命令如下：

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development ts-node ./main.ts",
    "prod": "cross-env NODE_ENV=production ts-node ./main.ts"
  }
}

先安装一下用于处理本地env文件的依赖：

pnpm i dotenv

然后我们在项目根目录创建两个环境变量文件：

.env.development

内容填入：

# 开发环境变量
API_BASE_URL="https://xxxx.xxx.xxx"

.env.production

内容填入：

# 正式环境变量
API_BASE_URL="https://yyyy.yyy.yyy"

环境文件配置完毕后，我们需要一个处理环境变量的脚本文件。

创建一个：utils/env.ts

import dotenv from "dotenv";
import { resolve } from "path";

/**
 * @description:初始化环境变量
 * @Date: 2023-05-25 15:23:29
 * @Author: mulingyuer
 */
(function initEnv() {
    const customPath = resolve(process.cwd(), `.env.${process.env.NODE_ENV}`);
    dotenv.config({ path: customPath });
})();

export default process.env;

这段脚本就干了一件事，通过NODE_ENV拼接出完整的环境变量路径，然后通过dotenv插件的config方法，将路径传入，此时插件会自动读取环境变量文件，并将里面的API_BASE_URL合并打到process.env对象中。

默认导出一个process.env其实没啥太大作用，因为内容已经合并到它里面了，只要我们保证这个env.ts一定是在获取环境变量之前运行即可。

所以我们只需要将这个脚本import引入放在入口文件的首行即可，这样就可以在之后的脚本中，都能通过process.env拿到配置的环境变量文件，一劳永逸。

main.ts

import  "./utils/env";

...具体的其他代码

环境变量类型声明

此时我们的环境变量在运行时是有的，但是ts是静态的，所以它无法推断出自定义的环境变量，通过process.env点属性的方式也不会有代码提示，所以我们还需要配置一下env的类型声明。

查看process.env的类型我们可以得知它是NodeJS.ProcessEnv类型。

ctrl点击这个process发现他是写在namespace NodeJS下的，在查看env，发现它的类型是ProcessEnv，它是一个interface声明，并且是在命名空间NodeJS下的。

现在我们知道了它的类型，就可以开始动手了，我们通过命名空间合并，interface声明合并的方式进行扩展。

创建一个env.d.ts文件：

declare namespace NodeJS {
    interface ProcessEnv {
        /** 当前环境 */
        NODE_ENV: string;
        /** api请求地址 */
        API_BASE_URL: string;
    }
}

然后再去使用就有提示了：

总结

我们可以发现，这种配置方式其实和平时cli框架的模式差不多，特别是cross-env和dotenv配合使用，通过NODE_ENV来实现切换环境变量，只不过框架是通过mode这个属性来指定环境变量，本质其实是相同的。