Astro中同时使用define:vars与函数import的问题求助

问题根源 #

Astro中带有define:vars的<script>会被编译为内联非模块脚本，而import语句仅能在模块脚本中使用，混写会触发语法错误；若强制添加type="module"，浏览器会直接请求未编译的TS文件，导致404（Astro不会处理模块脚本中的TS导入路径）。

解决方案 #

方案1：拆分脚本（推荐）

将数据传递和函数导入拆分为两个独立脚本：一个用define:vars传递数据到全局，另一个以模块形式导入函数并使用全局数据。

---
// Astro后端代码
const question = { /* 你的数据 */ };
---

<!-- 步骤1：用define:vars把数据挂载到全局 -->
<script define:vars={{ question }}>
  window.questionData = question;
</script>

<!-- 步骤2：模块脚本导入函数并使用全局数据 -->
<script type="module">
  import { jsonFetch } from "../../utils/json-fetch.ts";
  // 这里可以直接使用window.questionData和jsonFetch
  jsonFetch(window.questionData);
</script>

方案2：内联工具函数（适合小型无依赖函数）

如果jsonFetch是小型无依赖函数，可直接将其代码内联到带define:vars的脚本中，避免导入操作：

---
const question = { /* 你的数据 */ };
---

<script define:vars={{ question }}>
  // 直接复制jsonFetch的实现代码
  function jsonFetch(data) {
    // 原函数逻辑示例
    return fetch('/api', {
      method: 'POST',
      body: JSON.stringify(data)
    }).then(res => res.json());
  }

  // 使用函数和数据
  jsonFetch(question);
</script>

方案3：后端导入函数并序列化传递（局限性较大）

在Astro后端脚本中导入函数，将其转为字符串后通过define:vars传递到前端，再还原为函数使用（仅适用于无外部依赖的函数）：

---
import { jsonFetch } from "../../utils/json-fetch.ts";
const question = { /* 你的数据 */ };
// 将函数转为字符串
const jsonFetchStr = jsonFetch.toString();
---

<script define:vars={{ question, jsonFetchStr }}>
  // 还原函数
  const jsonFetch = new Function(`return ${jsonFetchStr}`)();
  // 使用函数和数据
  jsonFetch(question);
</script>

内容的提问来源于stack exchange，提问作者Rodrigo João Bertotti