Gatsby

Question

我已经成功地创建了一个生成用户可以下载的文本文件的函数。

当我运行 Gatsby 的开发构建时它工作得很好，但是当我为生产构建时我得到错误：WebpackError: ReferenceError: Blob is not defined

如果我然后尝试添加 import {Blob} from "buffer" 我得到的是：WebpackError: ReferenceError: window is not defined 然后它也不再适用于 Gatsby develop。

从我设法发现的情况来看，我什至根本不应该将 Blob 与 Node 一起使用，而是使用 Buffer，但我完全迷失了，因为它似乎不直接替换 Blob。另外，为什么它适用于我的开发版本但不适用于生产？感觉我应该接近解决方案？

这是我的函数：


export function Download() {
  const data = new Blob(["Hello world"], {
    type: "text/plain;charset=utf-8",
  });
  const downloadLink = window.URL.createObjectURL(data);
  return downloadLink;
}

export default Download;

Answer 1

From what I've managed to find out is that I'm not even supposed to use Blob with Node at all

部分正确。当您说 Blob 根本没有使用 Node 时，您是对的，但是，当您运行 gatsby build 时，您的代码被解析并捆绑在 Node 服务器中，这就是它崩溃的原因代码。换句话说，您的代码由 Node 服务器解释，其中 there's no window or other global objects（例如 document）因为它们甚至还没有定义。另一方面，当您运行 gatsby develop 您的代码由浏览器解释时，其中存在 window 和其他全局对象。

您可以通过添加以下条件轻松绕过此问题：

if(typeof window !== "undefined")

这将检查您是在服务器上还是在客户端上。

尝试使用：

export function Download() {
  if(typeof window !== "undefined"){
    const data = new Blob(["Hello world"], {
      type: "text/plain;charset=utf-8",
    });
    const downloadLink = window.URL.createObjectURL(data);
    return downloadLink;
  }
}

export default Download;

Gatsby - 尝试生成和下载文本文件

Gatsby - Trying to Generate and Download a Text File

javascript

blob

webpack