Jumblie 拥有一个数据库！

如果你还没玩过Jumblie，那你应该玩玩！

我之前讲过我是如何制作 Jumblie 的。简单来说：它完全是用最基本的 HTML、CSS 和 JavaScript 编写的，没有任何依赖项。

话虽如此，目前每天生成谜题的方式非常繁琐：我只是偶尔更新代码仓库里一个普通文件中的 JavaScript 对象来添加谜题。可想而知，这种方式既不可持续也不实用！但是，我也不想通过从数据库拉取数据来增加代码库的复杂性，也不想因此而不得不安装或重写一大堆东西。

我最终使用Supabase和Netlify 构建插件找到了一个解决方案，我对此非常满意！

Supabase 方面

在 Supabase 端，创建包含所有已发布谜题以及即将发布的谜题的表格非常简单。我进行了一些特殊的转换和脚本编写，将我最初的大型 JS 对象转换成了 CSV 文件，然后可以直接将其导入到新的数据库中。

Supabase 确实有一个支持良好的JavaScript 客户端库，我差点就用上了，但因为我想把脚本放在构建插件里，所以最后我还是做了一个简单的 REST 查询。

const response = await fetch(`${supabaseUrl}/rest/v1/${tableName}`, {
    headers: {
        "Content-Type": "application/json",
        apikey: supabaseKey,
    },
});

这让我想到了……

构建插件方面

我决定采用 Netlify 构建插件方案，因为我意识到我不需要每次用户加载页面时都查询 Supabase，而只需要在需要加载新谜题时才查询即可。所以，当我点击部署按钮时，构建插件会被调用onPreBuild（也就是在构建和部署之前），它会从 Supabase 拉取谜题，并创建一个包含网站其他部分所需全部内容的新文件！

const fs = require("fs");

module.exports = {
    onPreBuild: async () => {
        const outputFile = "./wordList.js";

        // ... Supabase query ...

        // content from Supabase
        const data = await response.json();

        const fileContent = `const wordList = ${JSON.stringify(data)};`;
        fs.writeFileSync(outputFile, fileContent);

        console.log(`Successfully saved word list to ${outputFile} 🔥`);
    },
};

因为这个组合的输出结果几乎与之前完全相同（文件wordList只是从数据库中填充，而不是由我偶尔更新），所以我不需要更改任何游戏逻辑。

安装插件只需将这些代码添加到netlify.toml!

[[plugins]]
package = "/plugins/get-words"

就是这样！总而言之，我们有一个 Netlify 构建插件，它可以创建一个文件，用来自 Supabase 的数据填充该文件，并将该文件保存到构建中，并且在整个代码库中都会引用它。

哇哦！

我已经很久没做过构建插件了，也好久没用 Supabase 了，所以这次做这个插件对我来说是一次很有趣的学习经历！我的梦想是能够设置账号之类的功能，这样用户就可以保存进度，还能玩以前的谜题，所以我觉得这次的开发是朝着这个方向迈出的重要一步。不过在此之前，对用户来说它还是老样子，只是底层代码简洁了很多。

整个改进的逻辑代码不到30行！你可以在这里看到它，以及Jumblie游戏的其余代码。

去玩Jumblie游戏吧，如果你愿意的话，还可以提出一个谜题建议！