Angular 13集成Amplitude会话重放插件后，QT/QML打包运行时出现“Identifier t has already been declared”错误

我之前碰到过类似的变量名冲突问题，一般是打包压缩工具生成的变量名和QT的JS运行环境、第三方库代码发生了冲突。结合你的配置和问题描述，你可以按以下步骤尝试解决：

1. 升级@types/node版本匹配Node.js环境 #

你当前Node.js版本是v16.20.2，但@types/node还停留在12.x版本，类型定义不匹配可能导致打包时的隐性问题。执行以下命令升级：

npm install @types/node@16 --save-dev

2. 调整Angular打包的Terser配置，避免变量名冲突 #

错误提示变量t重复声明，大概率是Angular默认的JS压缩工具Terser在混淆代码时生成了重复的t变量，和QT环境中的全局变量或其他代码冲突。你可以在angular.json中修改Terser配置，把t加入保留变量列表，禁止Terser使用该变量名：
找到项目的build配置，在options中添加或修改optimization字段：

"architect": {
  "build": {
    "options": {
      // 其他配置...
      "optimization": {
        "scripts": {
          "terserOptions": {
            "mangle": {
              "reserved": ["t"]
            }
          }
        },
        "styles": true,
        "fonts": true
      }
    }
  }
}

3. 尝试调整Amplitude插件版本 #

你当前使用的@amplitude/plugin-session-replay-browser@^1.16.0可能和Angular 13的打包流程存在兼容性问题。可以尝试降级到稍旧的稳定版本，比如1.15.0：

npm install @amplitude/plugin-session-replay-browser@1.15.0 --save

如果降级后问题解决，你可以再逐步尝试中间版本，找到最适配的兼容版本。

4. 用动态导入的方式封装Amplitude初始化 #

全局导入Amplitude模块可能导致全局作用域变量冲突，你可以在Angular服务中用动态导入的方式延迟加载Amplitude，避免全局变量污染：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class AmplitudeService {
  private amplitudeInitialized = false;

  async initAmplitude() {
    if (this.amplitudeInitialized) return;
    
    // 动态导入Amplitude模块
    const { init, add } = await import('@amplitude/analytics-browser');
    const { sessionReplayPlugin } = await import('@amplitude/plugin-session-replay-browser');
    
    init('你的Amplitude API密钥');
    add(sessionReplayPlugin());
    this.amplitudeInitialized = true;
  }
}

然后在AppComponent的ngOnInit中调用初始化：

import { AmplitudeService } from './amplitude.service';

// ...
constructor(private amplitudeService: AmplitudeService) {}

ngOnInit() {
  this.amplitudeService.initAmplitude();
}

5. 检查QT的JS引擎兼容配置 #

如果以上方法都无效，可能是QT的JS引擎对ES6+语法的支持存在限制。你可以尝试调整tsconfig.json的target和lib配置，让Angular生成更兼容的代码：
修改compilerOptions中的target为es2017（或更低的es2016），同时确保lib包含对应的版本：

"compilerOptions": {
  // 其他配置...
  "target": "es2017",
  "lib": ["es2017", "dom"]
}

如果以上步骤都无法解决问题，建议你尝试在QT环境中单独加载Amplitude的SDK文件（而非通过Angular打包），或者查看Amplitude官方文档中关于Angular 13兼容的具体说明。

内容来源于stack exchange