您可以通过多种方式将外部脚本（没有 npm module）注入 gatsby.js 项目。更喜欢将各自的 gatsby-plugin 用于“web-analytics”脚本。

使用require()：

• 在你的项目中创建一个文件myScript.js并粘贴脚本内容

• 如果您只想在该页面（=页面/组件范围）执行该脚本，请添加const myExtScript = require('../pathToMyScript/myScript')
  到其内部和之前的Pages文件夹中的有状态组件。 render()return()

  export default class Contact extends React.Component {  
    render() {  
     const myExtScript = require('../pathToMyScript/myScript')  
      return (
        ........       
                 )}
  

• 如果要在全局范围内（=在每个页面/组件中）执行脚本：
  将其添加到html.js

  <script dangerouslySetInnerHTML= {{ __html: ` 
      putYourSciptHereInBackticks `}} />`  
  

  在关闭</body>. 最好在这个组件上操作/监控你的全局范围，因为它有这个特定的目的......全局地将 html 注入每个页面/路由。

• 在全局范围内注入的另一种方法是require()在组件声明之前使用。这会起作用，但这不是一个好习惯，因为您的组件不应全局注入任何内容。

   const myExtScript = require('../pathToMyScript/myScript')  
  
     export default class Contact extends React.Component {  
      render() {  
        return (
        ........       
                 )}
  

PS对不起，如果答案没有正确编辑。这是我在 StackOverflow 上的第一个回答。

使用React-Helmet

第一的 import Helmet from 'react-helmet'

在你里面div你可以这样做

<Helmet>
<script type='text/javascript'>
(function(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }
}(document, 'script'));
</script>
</Helmet>

显然使用多行 JS 语法可以解决问题，如

let test = "<script type='text/javascript'>\
(function(d, s) {\
    var useSSL = 'https:' == document.location.protocol;\
    var js, where = d.getElementsByTagName(s)[0],\
    js = d.createElement(s);\
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);\
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }\
}(document, 'script'));\
</script><div id='pph-hireme'></div>"

或者，你可以做

let test2 = `
<script type='text/javascript'>
(function(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);\
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }\
}(document, 'script'));
</script><div id='pph-hireme'></div>
`

欢迎提出更多意见

一种方法——也许是首选方法——是使用 SSR 文件。

从文档：

文件 gatsby-ssr.js 允许您更改静态 HTML 文件的内容，因为它们由 Gatsby 和 Node.js 进行服务器端呈现 (SSR)。要使用 Gatsby SSR API，请在站点的根目录中创建一个名为 gatsby-ssr.js 的文件。导出您希望在此文件中使用的任何 API。

关于如何做到这一点的教程在这里。

它使用setHeadComponents注入到 html.js的方法：

setHeadComponents

它接受一个组件数组作为它的第一个参数，这些参数将在构建时添加到头部组件中，并将传递给 html.js。

还有另一种方法，即创建 React 的效果：

import { useEffect } from 'react'

const useGoogleAnalytics = () => {

    useEffect(() => {
        // GA Snippet
    }, [])

    return null
}

然后您可以useGoogleAnalytics()在要包含的页面组件中使用。

这样做的主要优点是：

• 你得到代码的翻译
• 维护更复杂的代码比在模板文字中更容易维护。

对于像 Google Analytics 这样的简单脚本，我会选择模板文字，但对于自定义和可更改的片段，我更喜欢效果。只要您不滥用它们，它就不会影响性能或产生开销。

有没有人看到这种其他方法的其他缺点？