Gatsby 如何加载并使用外部 JS 文件？

轩帅

在现代 JavaScript Web 开发工作流程中，通过 npm 包安装 JavaScript 是很常见的。然而，有时我们必须包含一个外部 JavaScript 文件，而现代工具可能会使这变得有点困难。在 Gatsby 框架中，如何加载并使用外部 JS 文件呢？本文旨在对此问题进行探讨。

Gatsby 框架提供了 gatsby-browser.js 配置文件，允许您响应浏览器中的 Gatsby 特定事件，并将您的页面组件包装在其他全局组件中。此外还提供了很多 API，诸如：onClientEntry（在 Gatsby 浏览器运行时首次启动时调用）。了解了这些设定背景，那么在 Gatsby 中加载并使用外部 JS 文件，就变得非常简单，只需添加类似如下代码即可：

// gatsby-browser.js
const addScript = url => {
  const script = document.createElement("script")
  script.src = url
  script.async = true
  document.body.appendChild(script)
}

export const onClientEntry = () => {
  window.onload = () => {
    addScript("https://image.nicelinks.site/ad-block-remind-min.js")
  }
}