面试题：TypeScript多环境构建配置中如何设置不同环境的全局变量

思路

定义环境变量文件：为每个环境（开发、测试、生产）创建独立的环境变量文件，用于存储该环境独有的全局变量。
构建工具配置：利用构建工具（如webpack）在不同环境构建时，根据当前环境读取对应的环境变量文件，并将变量注入到项目中。
项目中使用：在项目代码中能够方便地访问到这些注入的全局变量。

具体步骤（以webpack + dotenv为例）

安装依赖

npm install dotenv webpack webpack - cli --save - dev

创建环境变量文件
- 在项目根目录创建.env.development、.env.test、.env.production文件，例如.env.development中可以写：
```
API_URL = http://dev - api.example.com
```
- .env.test中：
```
API_URL = http://test - api.example.com
```
- .env.production中：
```
API_URL = http://api.example.com
```

配置webpack

在webpack.config.js中添加如下内容：

const path = require('path');
const Dotenv = require('dotenv - webpack');

module.exports = (env) => {
  let envFilePath;
  if (env === 'development') {
    envFilePath = path.resolve(__dirname, '.env.development');
  } else if (env === 'test') {
    envFilePath = path.resolve(__dirname, '.env.test');
  } else {
    envFilePath = path.resolve(__dirname, '.env.production');
  }

  return {
    // 其他webpack配置项...
    plugins: [
      new Dotenv({
        path: envFilePath,
        systemvars: true
      })
    ]
  };
};

在TypeScript项目中使用
- 在TypeScript项目中，可以通过process.env来访问这些变量，例如：
```
const apiUrl = process.env.API_URL;
console.log(apiUrl);
```
- 为了在TypeScript中有更好的类型提示，可以在src目录下创建一个env.d.ts文件：
```
declare namespace NodeJS {
  interface ProcessEnv {
    API_URL: string;
    // 在这里添加其他环境变量的类型声明
  }
}
```

其他方式

使用webpack - DefinePlugin：手动定义不同环境的全局变量，通过DefinePlugin将变量注入到代码中。例如：

const webpack = require('webpack');
module.exports = (env) => {
  let apiUrl;
  if (env === 'development') {
    apiUrl = 'http://dev - api.example.com';
  } else if (env === 'test') {
    apiUrl = 'http://test - api.example.com';
  } else {
    apiUrl = 'http://api.example.com';
  }

  return {
    // 其他webpack配置项...
    plugins: [
      new webpack.DefinePlugin({
        'process.env.API_URL': JSON.stringify(apiUrl)
      })
    ]
  };
};

在TypeScript项目中同样可以通过process.env.API_URL访问，但这种方式需要手动维护每个环境的变量值，不如使用dotenv方便。

星途面试题库

面试题：TypeScript多环境构建配置中如何设置不同环境的全局变量

知识考点

面试题答案

思路

具体步骤（以webpack + dotenv为例）

其他方式