HTML模块脚本中导入的FaunaDB变量无法在非模块脚本中访问的问题

阿华AIGC实验室

2026-4-14

看起来你遇到的是模块脚本作用域隔离导致的问题！你在第一个带type="module"的脚本里成功导入了Client和fql，但模块脚本的变量默认是封闭在自身作用域里的，不会自动暴露到全局环境中；而你的main.js是普通脚本（没有type="module"），它的执行上下文和模块脚本是分开的，自然就找不到fql这个变量了。

下面给你两种可行的解决方案：

方案一：将`main.js`也改为模块脚本（推荐）

这是最符合现代前端代码规范的做法，模块方式能更好地组织代码，避免全局污染。

修改HTML中的脚本标签，给main.js加上type="module"：

<script type="module" src="./main.js"></script>

在main.js的顶部直接导入所需的FaunaDB模块：

// main.js 顶部新增导入语句
import { Client, fql } from 'https://cdn.jsdelivr.net/npm/fauna@latest/dist/browser/index.js';

// 你的原有代码保持不变
const client = new Client({
  secret: '你的密钥',
});

async function RunQ(query) {
  try {
    const result = await client.query(query);
    return JSON.stringify(result, null, 2);
  } catch (error) {
    return new Error(error.message);
  }
}

async function CreateUser() {
  const query = fql`
    users.createData({
      email: 'me@gmail.com',
      pass: 'pass1',
      totals: {}
    })
  `;
  await RunQ(query);
}

这样main.js作为模块，就能直接访问fql变量，不需要依赖全局环境。

方案二：将模块变量挂载到全局对象（快速调试用）

如果只是想快速验证功能，可以在模块脚本里把fql和Client挂载到window全局对象上，让普通脚本能访问到：

<script type="module">
import { Client, fql } from 'https://cdn.jsdelivr.net/npm/fauna@latest/dist/browser/index.js';
// 挂载到全局对象，让普通脚本可以访问
window.Client = Client;
window.fql = fql;
console.log(fql ? 'MODULE LOADED' : 'FAILED TO LOAD MODULE')
</script>
<script src="./main.js"></script>

这种方式虽然能快速解决问题，但会污染全局作用域，大型项目不建议使用。

另外，建议你给CreateUser函数加上错误捕获，方便排查后续可能出现的问题：

async function CreateUser() {
  try {
    const query = fql`
      users.createData({
        email: 'me@gmail.com',
        pass: 'pass1',
        totals: {}
      })
    `;
    const result = await RunQ(query);
    console.log('用户创建成功：', result);
  } catch (err) {
    console.error('创建用户失败：', err);
  }
}

备注：内容来源于stack exchange，提问作者Marley Lamparter