TypeScript引入Mithril致Chrome扩展JS异常求助

方案1：用类型导入替代常规导入（仅用于类型检查） #

你只需要TypeScript识别m和Vnode的类型，不需要实际导入模块代码，可使用类型导入语法——在导入前加type关键字，编译后的JS文件会自动移除这些导入语句：

import type m from 'mithril';
import type { Vnode } from 'mithril';

这种写法明确告诉TypeScript：这些仅用于类型校验，不会生成实际的运行时代码。

方案2：声明全局类型变量 #

如果m和Vnode在Chrome扩展环境中是全局可用的（比如通过扩展脚本提前加载了Mithril），可以直接声明全局类型，彻底摆脱导入需求：

1. 在项目根目录创建global.d.ts文件
2. 写入以下内容：

declare const m: typeof import('mithril').default;
declare type Vnode = import('mithril').Vnode;

3. 确保tsconfig.json的include字段包含该声明文件：

{
  "include": [
    "src/**/*",
    "global.d.ts"
  ]
}

配置完成后，TypeScript会自动识别m和Vnode为全局变量，无需任何导入，编译后的JS也不会产生多余代码。

方案3：调整TypeScript模块解析策略 #

如果你的Chrome扩展通过<script>标签加载Mithril（比如在manifest.json中配置了内容脚本引入），可修改tsconfig.json的模块配置，允许直接使用UMD全局变量：

{
  "compilerOptions": {
    "module": "umd",
    "allowUmdGlobalAccess": true,
    // 其他原有配置...
  }
}

这样TypeScript会允许你直接使用Mithril暴露的全局变量，不需要导入语句，编译后也不会生成相关代码。

导入导致白屏的原因 #

Chrome扩展环境对模块加载有严格限制：如果你的脚本未配置为ES模块（manifest.json中type未设为module），直接出现import语句会触发语法错误，而扩展的隔离环境可能不会在控制台显示错误日志，最终导致白屏。

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