如何在 index.html 中添加脚本以响应应用程序

Question

我买了一个带有脚本的 html 模板，我想创建一个反应应用程序。我将脚本添加到我的反应应用程序的 index.html 中，如下所示：

    <script
      async
      type="text/javascript"
      src="%PUBLIC_URL%/assets/js/vendor/modernizr-2.8.3.min.js"
    ></script>

    <script
      async
      type="text/javascript"
      src="%PUBLIC_URL%/assets/js/vendor/jquery.min.js"
    ></script>

    <script
      async
      type="text/javascript"
      src="%PUBLIC_URL%/assets/js/popper.min.js"
    ></script>

    <script
      async
      type="text/javascript"
      src="%PUBLIC_URL%/assets/js/main.js"
    ></script>

为什么它并不总是有效？它只适用于异步。

但是如果我尝试使用 react-helmet 或 useEffect 之类的库，或者在 index.js 中导入 js 文件，我会遇到一堆错误。

useEffect(() => {
  const script = document.createElement('script');

  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;

  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  }
}, []);

错误：

src/assets/js/vendor/jquery.min.js
  Line 2:1:      Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2:1140:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2:2095:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2:5737:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2:6613:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 2:6734:   Expected an assignment or function call and instead saw an expression 

Answer 1

我假设您在源代码中本地和/src 下的某处有这些文件。要导入它们，您可以在 App 组件中使用 import。

// default imports

import "./assets/js/vendor/modernizr-2.8.3.min.js";
import "./assets/js/vendor/jquery.min.js";
import "./assets/js/popper.min.js";
import "./assets/js/main.js";

export default class App extends Component {
    // component code
}