使用 Gatsbyjs 包含本地 JS 和 CSS 文件

IT技术 javascript reactjs gatsby
2021-05-14 01:36:54

我对gatsbyjs生态系统完全陌生，同时我正在学习一些reactjs。我最近买了一个 html 模板，并试图将它用作gatsbyjs应用程序中的 UI 。模板有很多 css 和 js，无论是专有的还是定制的，这意味着gatsbyjs中没有插件来替代它们。也就是说，我剩下的唯一选择是将它们作为链接和脚本标签直接添加到gatsbyjs应用程序中。按照一些教程我看到他们建议导入这些文件，问题是这些文件不是webpack友好，导致多个错误并且应用程序无法编译。按照此帮助页面Gatsby 服务器渲染 API获取gatsby-ssr.js文件中的此代码：

const React = require("react")
exports.onRenderBody = ({ setBodyAttributes, setPostBodyComponents }) => {
  setBodyAttributes({
    "data-spy":"scroll",
    "data-offset":"73",
    "data-target":"#navbar-demos"
  })
  setPostBodyComponents([
    <script
      key="1"
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js"
    />,
    <script
      key="2"
      type="text/javascript"
      src="./src/revolution/js/extensions/revolution.extension.actions.min.js"
    />,
  ])
}

问题是这个文件revolution.extension.actions.min.js永远不会暴露给浏览器。当您打开开发人员工具时，它似乎在那里，但它绝对不是：

在此处输入图片说明

在此处输入图片说明

我该怎么做才能正确呈现这些 .js 文件并且浏览器可以看到它们？这也适用于 .css 文件

1个回答

经过更广泛的搜索，我找到了几篇提供解决方案的文章。这是第一种方法：

import { withPrefix } from "gatsby"
import Helmet from "react-helmet"

const IndexPage = () => (
  <div>
    <Helmet>
        <script src={withPrefix('revolution/js/extensions/revolution.extension.actions.min.js')} type="text/javascript" />
    </Helmet>

  </div>
)
export default IndexPage

这是使用gatsby-ssr.js文件的第二种方法：

const React = require("react")

exports.onRenderBody = ({setPostBodyComponents}) => {
          setPostBodyComponents([
            <script key="1" src={'js/plugins/plugins.js'} type="text/javascript" />,
            <script type="text/javascript" src={"js/beauty.custom.js"}/>
          ]);
  };

这样，脚本标签将被添加到末尾body而不是head

我认为第二个是最好的，但必须考虑到每次更改gatsby-ssr.js文件中的某些内容时都必须停止gatsby develop并重新运行它。

在第一种情况下使用react-helmet将热重载。

注意：在这两种方法中，文件都必须在static文件夹中

以下是我找到此方法的链接：

如何在 Gatsby 页面上包含本地 javascript？

如何使用 gatsby-browser 插入外部脚本？

其它你可能感兴趣的问题
上一篇很老的 3D 打印机，这是什么品牌或类型？ 下一篇帮助将我的 Anet A8 打印机安装到我的计算机上