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

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

脚本来自“http://localhost:8000/assets/js/plugins/jquery-2.2.4.min.js“已加载，即使其MIME类型（“文本/html”）不是有效的JavaScript MIME类型。

SyntaxError:应为表达式，已为'(

在

中的脚本不会像您预期的那样工作。构建过程不会以任何方式处理这些脚本。请尝试使用ES模块系统导入

jquery和放大插件，就像导入
React
、
Helmet
和顶部的其他
。/assets/css/
文件一样

您看到的错误是因为对jquery和放大弹出窗口的请求返回了404个错误，并且返回了gatsby的404页面，即html。
中的脚本将不会像您预期的那样工作。
中的脚本不会以任何方式被构建过程处理。请尝试使用ES modu导入
jquery和放大插件le系统就像您对顶部的
React
、
Helmet
和其他
。/assets/css/
文件所做的一样

您看到的错误是因为对jquery和放大弹出窗口的请求返回404个错误，并且返回了gatsby的404页面，即html。
尝试定制
头
组件，该组件通过复制和修改
html.js
在服务器上呈现。
尝试定制
头
组件按照建议复制和更改
html.js
在服务器上呈现。
我尝试创建一个html.js文件并添加样式表和脚本标记，但收到了相同的错误。我将我的资产文件夹放在src文件夹中，并引用了其中的文件。刷新缓存（
gatsby clean
）如果尚未加载，请重试。或者，将文件包含在
gatsby browser.js
中。尝试使用
gatsby clean
。也尝试使用
gatsby browser.js
但脚本未按顺序加载，因此未为使用它的某些脚本定义jquery。gatsby应用程序在服务器上呈现，这是您遇到脚本计时问题的原因。在导入和使用所需内容时，将jquery和其他插件作为项目依赖项添加会更有意义（您可以通过Gatsby获得树抖动和代码拆分作为附加好处）。我注意到你试图沿着这条路走下去-你会遇到什么样的错误？我尝试创建一个html.js文件并添加样式表和脚本标记，但我收到了相同的错误。我将我的资产文件夹放在src文件夹中并引用了那里的文件。刷新缓存（
gatsby clean
）如果尚未加载，请重试。或者，将文件包含在
gatsby browser.js
中。尝试使用
gatsby clean
。也尝试使用
gatsby browser.js
但脚本未按顺序加载，因此未为使用它的某些脚本定义jquery。gatsby应用程序在服务器上呈现，这是您遇到脚本计时问题的原因。在导入和使用所需内容时，将jquery和其他插件作为项目依赖项添加会更有意义（您可以通过Gatsby获得树抖动和代码拆分作为附加好处）.我注意到你尝试过这样做-你会遇到什么样的错误？我刚刚尝试将css和js导入到我的顶级组件中。css加载良好。js有一个问题。大多数脚本需要jquery，并且它们返回jquery对象的未定义，即使我导入的jquery脚本高于其他脚本。请查看此答案，谢谢Zlatev。我尝试将jQuery安装为npm包，然后导入它，但我得到了一组完全不同的错误。我将继续处理此问题，并让您知道我是否找到了解决方案。我刚刚尝试将css和js导入到我的顶级组件中。css加载良好。不过js有一个问题。大多数scripts需要jquery，即使我将jquery脚本导入到其他脚本之上，它们仍返回jquery对象的未定义。请查看此答案，谢谢Zlatev。我尝试将jquery安装为npm包，然后导入它，但我得到了一组完全不同的错误。我将继续处理此问题，如果我提出了解决方案，请告知您谨慎。
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>