Gatsby 使用自定义 javascript答案

【问题标题】：Gatsby use custom javascriptGatsby 使用自定义 javascript
【发布时间】：2021-06-02 17:14:46
【问题描述】：

所以我想在我的 Gatsby 项目中使用这些脚本：

<script src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"></script>
<script>
  glowCookies.start('en', { 
      style: 1,
      analytics: 'G-FH87DE17XF', 
      facebookPixel: '990955817632355',
      policyLink: 'https://link-to-your-policy.com'
  });
</script>

（来自https://github.com/manucaralmo/GlowCookies）

我尝试将它与react-helmet 一起使用：

<Helmet>
  <script src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"></script>
  <script>
      glowCookies.start('en', { 
          style: 1,
          analytics: 'G-FH87DE17XF', 
          facebookPixel: '990955817632355',
          policyLink: 'https://link-to-your-policy.com'
      });
  </script>
</Helmet>

但我收到此错误：

  41:17  error  Parsing error: C:\(...)\layout.js:     
Unexpected token, expected "}" (41:17)

  39 |     <script>
  40 |         glowCookies.start('en', {
> 41 |             style: 1,
     |                  ^
  42 |             analytics: 'G-FH87DE17XF',
  43 |             facebookPixel: '990955817632355',
  44 |             policyLink: 'https://link-to-your-policy.com'

所以只添加第一个脚本标签就可以了，但不能创建它的实例。

【问题讨论】：

标签： reactjs gatsby react-helmet

【解决方案1】：

这样包装：

<Helmet>
  <script src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"/>
  <script>
    {`glowCookies.start('en', {
      style: 1,
      analytics: 'G-FH87DE17XF',
      facebookPixel: '990955817632355',
      policyLink: 'https://link-to-your-policy.com'
    })`}
  </script>
</Helmet>

使用它作为模板文字就可以了。

【讨论】：

很遗憾，这给了我这个错误：s8.directupload.net/images/210422/nk97wtlh.png
这是因为您错误地导入了Helmetcomponent，而不是因为sn-p。像这样使用它：import {Helmet} from "react-helmet";
谢谢，但这并不能解决错误。我创建了一个复制仓库：github.com/KonstantinSchuette/gatsby-custom-javascript /components/test.js 已经实现了头盔
新的错误提示是什么？删除分号。尝试添加更多细节而不是“这不起作用”
去掉分号就行了，谢谢！我不知道为什么这是我的格式化程序添加的。错误和以前一样。

【解决方案2】：

这可能不是实现自定义 javascript 的最佳方式，但这是最适合我的方式。所以不需要react-helmet，只需使用 Gatsbys 内置函数即可：

gatsby-ssr.js

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"
      src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"
      defer
    />,
    <script key="glowCookies.min.js" src="/js/glowCookies.js" defer />,
  ])
}

/static/js/glowCookies.js

glowCookies.start('en', {
   style: 1,
   analytics: 'G-FH87DE17XF',
   facebookPixel: '990955817632355',
   policyLink: 'https://link-to-your-policy.com'
})

【讨论】：