React项目如何为不可修改的多版本analyzejs库添加命名空间避免冲突

你遇到的报错根因非常明确：TypeScript的类型声明仅作用于编译阶段，不会生成任何运行时代码。你只声明了v1命名空间的类型，但没有在运行时真实创建window.v1这个全局对象，所以运行时会抛出未定义错误。

以下是两种可行的落地方式：

方案1：全局脚本加载适配（改动最小，和你原有使用习惯兼容） #

步骤1：修改index.html的脚本加载逻辑 #

在加载库之前先提前创建命名空间对象，脚本加载完成后将库暴露的全局方法转存到对应命名空间，再清理全局挂载的方法避免冲突：

<head>
  <script>
    // 提前创建全局命名空间对象
    window.v1 = {}
    window.v2 = {}
  </script>
  <!-- 加载v1版本 -->
  <script 
    src="/lib/analyzejs-v1.js"
    onload="
      // 将v1暴露的全局方法转存到v1命名空间
      v1.f1 = f1;
      v1.f2 = f2;
      // 清理全局挂载的方法避免和v2冲突
      delete window.f1;
      delete window.f2;
    "
  ></script>
  <!-- 加载v2版本 -->
  <script 
    src="/lib/analyzejs-v2.js"
    onload="
      // 将v2暴露的全局方法转存到v2命名空间
      v2.f1 = f1;
      v2.f2 = f2;
      // 清理全局挂载的方法
      delete window.f1;
      delete window.f2;
    "
  ></script>
</head>
<body>
  <div id="root"></div>
</body>

提示：如果库暴露的方法较多，可以在加载脚本前先记录当前window的属性列表，加载后对比出新增的属性批量转存到命名空间，避免逐个手动赋值。

步骤2：调整TS类型声明 #

修改frontend/src/defines/analyzejs.d.ts，声明全局命名空间的类型：

declare global {
  namespace v1 {
    function f1(): string;
    function f2(): string;
    // 补充其他v1方法声明
  }
  namespace v2 {
    function f1(): string;
    function f2(): string;
    // 补充其他v2方法声明
  }
}
export {}

调整完成后你就可以直接在代码里通过v1.f1()、v2.f1()调用对应版本的方法，编译和运行都不会有问题。

方案2：模块化动态加载（更符合React工程规范） #

如果你不想污染全局作用域，也可以封装成模块按需加载，不需要提前在index.html里引入脚本：

步骤1：封装工具模块 #

新建frontend/src/utils/analyzejs.ts：

// 封装v1加载逻辑
export const loadV1 = async () => {
  return new Promise<{f1: () => string, f2: () => string}>((resolve) => {
    const script = document.createElement('script')
    script.src = '/lib/analyzejs-v1.js'
    script.onload = () => {
      const res = {
        f1: window.f1,
        f2: window.f2
        // 补充其他v1方法
      }
      // 清理全局挂载
      delete window.f1
      delete window.f2
      resolve(res)
    }
    document.head.appendChild(script)
  })
}

// 封装v2加载逻辑
export const loadV2 = async () => {
  return new Promise<{f1: () => string, f2: () => string}>((resolve) => {
    const script = document.createElement('script')
    script.src = '/lib/analyzejs-v2.js'
    script.onload = () => {
      const res = {
        f1: window.f1,
        f2: window.f2
        // 补充其他v2方法
      }
      delete window.f1
      delete window.f2
      resolve(res)
    }
    document.head.appendChild(script)
  })
}

步骤2：业务代码调用 #

在需要使用对应版本的组件里按需调用即可：

import { loadV1, loadV2 } from '@/utils/analyzejs'

// 需要用v1的场景
const execV1 = async () => {
  const v1 = await loadV1()
  console.log(v1.f1())
}

// 需要用v2的场景
const execV2 = async () => {
  const v2 = await loadV2()
  console.log(v2.f1())
}

这个方案只有用到对应版本的时候才会加载脚本，不会产生全局污染，适合对性能和代码规范要求更高的场景。

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