如何配置Deno以自动处理npm:preact的JSX导入？

方案一：经典JSX转换模式（推荐） #

这种方式不需要依赖jsx-runtime模块，直接让Deno自动注入所需的h函数和Fragment，同时解决类型错误：

修改你的deno.json配置文件如下：

{
  "imports": {
    "$preact/": "npm:preact@10.20.2/",
    "$preact": "npm:preact@10.20.2"
  },
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "types": ["npm:preact@10.20.2"]
  }
}

配置说明：

• "jsx": "react"：让TypeScript使用经典JSX转换，把<p></p>这类JSX编译为h('p', {})格式的代码
• "jsxFactory": "h"：指定JSX转换用的工厂函数为Preact的h
• "jsxFragmentFactory": "Fragment"：指定Fragment对应的工厂函数
• "types": ["npm:preact@10.20.2"]：引入Preact的类型定义，解决JSX.IntrinsicElements不存在的类型报错
• import maps配置确保$preact能正确指向你指定版本的Preact npm包

方案二：自动JSX Runtime模式（修复路径解析问题） #

如果偏好使用react-jsx自动导入模式，需要手动修正jsx-runtime的路径映射，解决Deno的解析错误：

修改deno.json如下：

{
  "imports": {
    "$preact/": "npm:preact@10.20.2/",
    "$preact": "npm:preact@10.20.2",
    "$preact/jsx-runtime": "npm:preact@10.20.2/jsx-runtime.js"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "$preact",
    "types": ["npm:preact@10.20.2"]
  }
}

配置说明：

• 手动添加$preact/jsx-runtime的映射，指定到具体的jsx-runtime.js文件，解决Deno无法自动解析模块后缀的问题
• "jsx": "react-jsx"：启用自动JSX Runtime模式，Deno会自动导入jsx-runtime中的函数，无需手动写import { h } from "$preact"
• "jsxImportSource": "$preact"：指定JSX Runtime的来源为$preact

为什么之前的配置失败？ #

• 当设置jsxImportSource: "$preact"且jsx: "react-jsx"时，Deno会尝试查找$preact/jsx-runtime模块，但默认的import map映射无法正确定位到该模块的具体文件（Preact的jsx-runtime是独立文件，需要明确指定路径）
• 经典JSX转换模式（jsx: "react"）更适配Deno对Preact模块的解析逻辑，不会出现路径解析问题

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