Question

我正在研究Gatsby项目。我正在尝试找出在应用程序中包含外部脚本的最佳方法。目前，我的css和js文件在'src'目录中有一个'assets'文件夹。我将所有css文件导入布局组件的顶部，这似乎工作正常。然后，我在同一布局组件中使用react helmet来包含我的所有js文件。我在浏览器控制台中收到以下错误消息：

The script from “http://localhost:8000/assets/js/plugins/jquery-2.2.4.min.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

SyntaxError: expected expression, got '<'

这是我的布局组件的前22行：

import React from "react"
import { Helmet } from "react-helmet"

import "../assets/css/bootstrap.min.css"
import "../assets/css/fontello.min.css"
import "../assets/css/magnific-popup.min.css"
import "../assets/css/animsition.min.css"
import "../assets/css/style.css"

export default () => (
  <div className="global-outer">
    <Helmet>
      <script
        type="text/javascript"
        src="../assets/js/plugins/jquery-2.2.4.min.js"
        defer="true"
      ></script>
      <script
        type="text/javascript"
        src="../assets/js/plugins/jquery.magnific-popup.min.js"
        defer="true"
      ></script>

Answer 1

<Helmet />中的脚本无法正常工作。生成过程不会对它们进行任何处理。像使用import，React以及其余Helmet文件在顶部一样，尝试使用ES模块系统来../assets/css/进行jQuery和宏伟的插件。

您看到的错误是因为对jquery和magnific-popup的请求返回404错误，并且返回了gatsby的404页面，即html。

Answer 2

尝试通过按照建议的in the docs复制和更改head来定制在服务器上呈现的html.js组件。

在Gatsby中包括外部脚本-MIME类型（“ text / html”）不是有效的JavaScript MIME类型

2 个答案: