【Gatsby】在gatsby-browser.js文件中引入script

Gatsby 在 gatsby-browser.js文件中提供了一些API，可供开发者 监控浏览器的特定事件 和 写一些全局组件。

问题情境：

首先我们要了解，我们可以使用react-helmet插件动态的往head中添加script标签，引入资源。

import { Helmet } from 'react-helmet';

<Helmet>
  <script type='text/javascript' src='xxx.js'></script>
</Helmet>

本次的问题是，我们想要提高引入资源的加载顺序，使得资源在页面渲染前有充裕的时间执行。而通过helmet动态引入的资源都在mounted后执行，不能满足本次需求。于是我们寻求在gatsby-browser.js中执行全局方法来引入资源。

具体代码：

// onClientEntry: 在 Gatsby 浏览器运行时首次启动时调用
const onClientEntry = () => {
  let myScript = document.createElement('script');
  mpaasScript.type = 'text/javascript';
  mpaasScript.src =
    'my.js';
  document.querySelector('body').appendChild(myScript);
};

export { onClientEntry };

感想总结：

使用Gatsby框架还是需要对4个文件（gatsby-browser.js、gatsby-config.js、gatsby-node.js、gatsby-ssr.js）有一定的了解，里面有很多插件或框架所提供的方法，具体可查GATSBY官网文档。好好利用Gatsby的生态与官网文档。