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

 

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

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")
  }
}
免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » Gatsby 如何加载并使用外部 JS 文件?