如何在 Snowpack 3 中使用模板 HTML？

问题描述

我是 Snowpack 的新手，我在目标输出文件夹中有一个 Template.html' file in my source folder that I would like Snowpack to read and produce an index.html`。如果我可以在模板中使用一些变量，Snowpack 可以简单地从环境或配置文件中替换这些变量，那也很好。知道如何实现这一目标吗？

解决方法

如果我理解正确，您希望使用 index.html 的替代方法。我不确定您使用的是 React 还是其他框架，但如果您使用的是 React，我找到了一个解决方案。

---

此上下文仅供参考，与问题无关，但如果对其他人有帮助，我会分享。就我而言，我想在我的生产版本中阻止以下警告（由于反应脚本，而不是雪堆）：

从“http://localhost:3000/dist/index.js”加载模块由于不允许的 MIME 类型（“text/html”）而被阻止。

这是因为 snowpack 需要在 index.html 中使用以下脚本标记来生成您的页面：

...
    <script type="module" src="/dist/index.js"></script>
...

我现在不需要在生产中使用雪堆---我现在只是为了模块热重载而在这里---所以我想用一个替代的 index.html 文件来抑制这个警告，只是用于snowpack，以便它具有此脚本标记。

---

解决方案：

因此，对于您想在 snowpack 中使用变量的情况 --- 但不是您的生产构建（或其他运行脚本）--- 您可以执行以下操作：

1. 在您的 index.html 正文中使用上述脚本创建一个模板，以及您需要的任何其他变量。将其命名为“index.html”以外的其他名称。为简单起见，我选择了 indexsnowpack.html。

2. 将以下路由 (Docs here) 添加到应用根目录中的 snowpack.config.js 文件：

module.exports = {

...

    routes: [
        {
            match: "routes",src: ".*",dest: "/indexsnowpack.html"
         }
    ]
...

}

注意：上述解决方案将匹配您的新 indexsnowpack.html 文件的所有路径。因此，如果您不使用单页应用程序设置，您会遇到一些问题。此外，如果您定义了其他路由（例如，用于 api 调用），请将它们放在此路由之上，以便此路由作为除 api 之外的所有调用的后备。