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

Question

我是Snowpack的新手，在目标输出文件夹中有一个Template.html' file in my source folder that I would like Snowpack to read and produce an index.html`。如果我可以在模板中使用一些变量，而Snowpack只需替换环境或配置文件中的变量，那就更好了。你知道怎么做到这一点吗？

Answer 1

如果我理解正确的话，您希望使用index.html的替代品。我不确定你使用的是react还是一个不同的框架，但是如果你使用react，我找到了一个解决方案。

这篇文章是为了增加趣味性，与问题无关，但我会分享它，以防对其他人有帮助。在我的例子中，我想在我的产品构建中阻止以下警告(由于react-scripts，而不是snowpack)：

由于不允许的MIME类型(“

/html”)，来自“http://localhost:3000/dist/index.js””的文本加载模块被阻止。

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

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

我现在不需要生产中的snowpack -我现在只是为了模块热重新加载-所以我想用一个替代的index.html文件来抑制这个警告，只是为了snowpack，这样它就有了这个脚本标签。

解决方案：

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

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

1. 将以下路径(Docs here)添加到应用程序根目录下的snowpack.config.js文件：

module.exports = {

...

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

}

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