TypeScript 中如何处理环境变量-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要使用环境变量来配置一些参数或者 API 地址等。但是在 TypeScript 中要如何使用环境变量呢？本文将介绍三种处理环境变量的方法，包括手动编译、webpack 加载以及使用 dotenv。

手动编译

第一种方法是手动编译环境变量。我们可以在代码中定义一个环境变量配置文件，然后在编译时通过命令行参数传入变量值。代码示例：

// config.ts
export const API_HOST = process.env.API_HOST;

// 编译时传入环境变量
tsc --project . --outDir dist --define API_HOST="http://localhost:8080"

在代码中，我们可以直接使用 process.env.API_HOST 访问环境变量，而在编译时通过 --define 参数传入实际的值。

这种方法的优点是配置简单，可以适用于任何项目。但是需要手动管理编译参数，不太方便。

webpack 加载

第二种方法是使用 webpack 来加载环境变量。我们可以在 webpack 中使用 DefinePlugin 插件来定义环境变量，代码示例：

-- -------------------- ---- -------
-- -----------------
--- ----------------------
    -------------- -
        ----------- ---------------------------------------
    -
--

-- ---------
------ ----- -------- - ---------------------

在代码中我们可以直接访问 process.env.API_HOST 获取环境变量，而在 webpack 中通过 DefinePlugin 将环境变量定义到了全局。

这种方法需要在 webpack 中进行配置，不太适合只有简单需求的项目。

使用 dotenv

第三种方法是使用 dotenv 来加载环境变量。dotenv 可以从 .env 文件中读取环境变量，并将其注入到进程的环境变量中，代码示例：

// .env
API_HOST=http://localhost:8080

// config.ts
import dotenv from 'dotenv';
dotenv.config();
export const API_HOST = process.env.API_HOST;

在代码中我们可以直接访问 process.env.API_HOST 获取环境变量，而在 dotenv 中通过读取 .env 文件加载环境变量。

这种方法需要安装 dotenv，但是使用简单，适合任何项目。

总结

本文介绍了三种处理环境变量的方法，包括手动编译、webpack 加载以及使用 dotenv。其中手动编译适用于任何项目，但是需要手动管理编译参数。webpack 加载需要在配置中进行，不太适合只有简单需求的项目。dotenv 使用起来简单，适合任何项目。我们可以根据实际情况选择使用不同的方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64e872b9f6b2d6eab33fc046