如何在TypeScript编译输出中移除React导入以支持CDN引用？

核心问题分析 #

你当前的矛盾点在于：TypeScript编译时会保留import * as React from 'react'这类导入语句，但浏览器无法识别裸模块标识符；而CDN引入的React/ReactDOM是挂载在全局window.React和window.ReactDOM上的。需要让TypeScript既保留类型检查能力，又不生成实际的导入语句。

正确配置步骤 #

1. 修改tsconfig.json，告知TypeScript使用全局变量 #

在compilerOptions中添加全局变量声明，同时调整模块相关配置以适配浏览器环境：

{
  "compilerOptions": {
    "target": "es2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noEmitOnError": true,
    "allowUmdGlobalAccess": true,
    "globals": {
      "React": "typeof import('react')",
      "ReactDOM": "typeof import('react-dom')"
    }
  },
  "include": ["**/*.ts"]
}

• allowUmdGlobalAccess：允许TypeScript识别CDN引入的UMD格式全局模块
• module: ESNext + moduleResolution: bundler：适配浏览器模块系统，避免生成不必要的导入代码

2. 调整TypeScript代码，移除导入语句改用全局变量声明 #

替换原有的import语句为全局变量类型声明，确保类型检查正常：

// 移除原import语句，添加全局变量类型声明
declare const React: typeof import('react');
declare const ReactDOM: typeof import('react-dom');

class HelloComponent extends React.Component {
    render() {
        return React.createElement("div", null, "Hello, World!");
    }
}

document.addEventListener("DOMContentLoaded", () => {
    const oReactRoot = ReactDOM.createRoot(document.getElementById("app")!);
    oReactRoot.render(React.createElement(HelloComponent, null));
});

编译后的JS文件将不再包含任何import语句，直接调用全局的React和ReactDOM变量。

3. 确保HTML中CDN脚本顺序正确 #

保持React在ReactDOM之前加载，同时移除脚本的type="module"属性：

<!DOCTYPE html>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>
<script src="test.js"></script>

原有方案失败原因 #

• 导入省略未生效：你代码中使用了React.Component、ReactDOM.createRoot等运行时值，并非仅使用类型，TypeScript不会移除这类导入语句。
• 引用指令无效：///<reference types="react"/>仅引入类型定义，但不会让TypeScript识别全局变量，因此无法关联ReactDOM.createRoot的类型。
• Import Map适配失败：CDN提供的是UMD格式包，而非ES模块，Import Map仅针对ES模块设计，导致无法正确映射模块，进而出现类继承错误。

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