2

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

4

1 回答 1

1

如果我理解正确，您正在寻找使用index.html. 我不确定您使用的是 react 还是其他框架，但如果您使用的是 react，我找到了解决方案。

这个上下文是为了风味，与问题无关，但我会分享它以防对其他人有帮助。就我而言，我想在我的生产版本中阻止以下警告（由于反应脚本，而不是雪包）：

由于不允许的 MIME 类型（“text/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。

  2. 将以下路由（此处的 Docs）添加到您snowpack.config.js的应用程序根目录中的文件中：


module.exports = {

...

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

}

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

于 2021-02-02T21:06:48.983 回答