如何在tsconfig.json中根据环境动态配置路径映射？

首先明确：tsconfig.json的paths是静态编译配置，无法直接通过运行时的process.env动态修改——因为TypeScript在编译阶段就会解析paths映射，而process.env是运行时才会注入的变量，两者生命周期不重叠。

不过有几种可行的替代方案实现你的需求：

方案1：直接在代码中动态构造导入路径 #

绕开tsconfig的paths映射，直接在代码里根据环境变量拼接导入路径，这是最直接简单的方式：

// 读取环境变量，默认用stage
const testEnv = process.env.TEST_ENV || 'stage';

// 动态导入对应环境的json文件，同时指定类型
const data = import(`./${testEnv}/users/user_data.json`) as Promise<{
  username: string;
  password: string;
}>;

test("my env test", async () => {
  const { username } = await data;
  // 后续业务逻辑
});

配套配置： #

• 在tsconfig.json中开启resolveJsonModule和esModuleInterop，确保能正确导入JSON文件：

  {
    "compilerOptions": {
      "target": "es6",
      "strict": true,
      "module": "commonjs",
      "sourceMap": true,
      "resolveJsonModule": true,
      "esModuleInterop": true
    }
  }
  

• 为了让TypeScript识别动态导入的JSON类型，可以添加类型声明文件（比如types/test-data.d.ts）：

  declare module '*/user_data.json' {
    export const username: string;
    export const password: string;
  }
  

• 在package.json中配置不同环境的测试脚本，方便快速切换：

  {
    "scripts": {
      "test:stage": "TEST_ENV=stage npx playwright test",
      "test:prod": "TEST_ENV=prod npx playwright test"
    }
  }
  

方案2：使用多份tsconfig配置文件 #

针对不同环境创建独立的tsconfig文件，继承基础配置并修改paths：

• tsconfig.stage.json：

  {
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
      "paths": {
        "@test-data/*": ["stage/users/*"]
      }
    }
  }
  

• tsconfig.prod.json：

  {
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
      "paths": {
        "@test-data/*": ["prod/users/*"]
      }
    }
  }
  

然后在运行测试时指定对应的tsconfig：

# 运行stage环境测试
TEST_ENV=stage npx playwright test --config playwright.config.ts --tsconfig tsconfig.stage.json

# 运行prod环境测试
TEST_ENV=prod npx playwright test --config playwright.config.ts --tsconfig tsconfig.prod.json

这种方案适合需要严格保持paths映射规范的场景，缺点是需要维护多份tsconfig文件。

方案3：动态生成tsconfig文件 #

写一个简单的Node.js脚本，根据环境变量动态修改tsconfig的paths，再运行测试：

1. 创建基础配置文件tsconfig.base.json：

{
  "compilerOptions": {
    "target": "es6",
    "strict": true,
    "module": "commonjs",
    "sourceMap": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {}
  }
}

2. 创建生成脚本generate-tsconfig.js：

const fs = require('fs');
const baseConfig = require('./tsconfig.base.json');

const testEnv = process.env.TEST_ENV || 'stage';
baseConfig.compilerOptions.paths['@test-data/*'] = [`${testEnv}/users/*`];

fs.writeFileSync('./tsconfig.json', JSON.stringify(baseConfig, null, 2));

3. 在package.json中配置测试脚本：

{
  "scripts": {
    "test:stage": "TEST_ENV=stage node generate-tsconfig.js && npx playwright test",
    "test:prod": "TEST_ENV=prod node generate-tsconfig.js && npx playwright test"
  }
}

每次运行测试前，脚本会自动生成对应环境的tsconfig.json，满足动态修改paths的需求。

内容的提问来源于stack exchange，提问作者mismas