UMD转ESNext时TypeScript模块导入问题求助

问题场景 #

原项目基于UMD模块构建，切换到ESNext规范后，导入UMD模块遇到以下问题：

• 用import {Chart, ChartDataSets, ChartConfiguration} from './com/chart';：TypeScript无报错，但浏览器提示Loading module from [...]/com/chart was blocked because of a disallowed MIME type (“text/html”).
• 添加.js后缀后用import {Chart, ChartDataSets, ChartConfiguration} from './com/chart.js';：出现Import not found: Chart错误
• 用import * as Chart from './com/chart.js';导入整个模块：Chart不是构造函数，且Chart.Chart未定义
• HTML脚本标签结合///<reference types='./com/chart'/>引用可运行，但TypeScript提示'Chart' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)

核心疑问：添加.js后缀后，模块的处理方式为何不同？

原因拆解 #

1. 无后缀导入的浏览器行为 #

ES模块在浏览器中严格遵循文件路径解析规则：导入路径无后缀时，浏览器会直接请求该路径，但服务器通常将无后缀请求视为HTML页面，返回text/html类型响应。而浏览器要求ES模块必须以application/javascript类MIME类型加载，因此触发MIME错误。

TypeScript无报错是因为TS默认采用Node.js风格的模块解析，允许省略后缀并自动补全.ts/.d.ts等，但这和浏览器的ES模块解析逻辑不兼容。

2. 加.js后缀后的本质差异 #

添加.js后缀后，浏览器能正确请求到JS文件，但问题出在UMD模块的导出逻辑：
UMD模块会根据环境自动适配导出方式：

• 在Node.js/CommonJS环境：通过module.exports导出
• 在浏览器全局环境：挂载到window对象
• 但它完全没有按照ES模块规范，用export语句暴露成员

当你用ES模块的import {Chart} from './com/chart.js'语法导入时，浏览器会把该UMD文件当作ES模块解析，但UMD模块里根本没有export的Chart成员，所以会提示“Import not found”。

用import * as Chart from './com/chart.js'时，你拿到的是ES模块的命名空间对象，但UMD模块没有ES模块导出，这个对象是空的，自然找不到Chart.Chart，也无法作为构造函数使用。

3. 脚本标签+类型引用的矛盾 #

用HTML脚本标签引入UMD模块时，它会把Chart挂载到全局window对象，所以代码能运行，但TypeScript会检测到你在模块文件中使用了全局变量，因此提示你应使用导入语句而非直接引用全局变量——这是TS的模块规范校验导致的。

可行解决方向 #

• 若无法修改UMD模块代码，可在TS中声明全局变量来规避类型错误：

  declare var Chart: typeof import('./com/chart').Chart;
  

  或使用动态导入结合全局变量的方式调用。
• 优先替换为该库的ES模块版本（如果提供），从根源解决兼容问题。

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