如何在 React 页面上包含本地脚本文件？答案

【问题标题】：How to include local script file on React page?如何在 React 页面上包含本地脚本文件？
【发布时间】：2021-10-08 00:32:03
【问题描述】：

我正在我的React 网站上实现barba JS，但似乎无法让文件在页面上工作。作为参考，我的文件夹结构如下：

theme
  pages
    Homepage.js
    Contact.js
  utils
    anim.js
    helpers.js
  index.js

在我的index.js 文件上，我正在尝试import 我的anim.js 脚本，以便将该文件应用于我的所有pages。然而，在编译时，我在anim.js 上收到了一个'delay' is not defined no-undef 错误，即使delay 已定义（因为我正在导入gsap）。

Homepage.js（Contact.js 类似，唯一不同的是data-barba-namespace）

import React from "react";
import LoadingScreen from "../components/LoadingScreen/LoadingScreen";
import Hero from "../components/Hero/Hero";

class Homepage extends React.Component {
  render(){
    return (
      <>
        <LoadingScreen />
        <div data-barba="container" data-barba-namespace="home">
          <Hero />
        </div>
      </>
    )
  }
}

export default Homepage;

anim.js

import { pageTransition, contentAnimation } from "./helpers";
import barba from '@barba/core';
import gsap from "gsap";

barba.init({
  sync: true,
  transitions: [{
    async leave(data){
      const done = this.async();
      pageTransition();
      await delay(1000);
      done();
    }, async enter(data){
      contentAnimation();
    }, async leave(data){
      contentAnimation();
    }}
  ]
});

helpers.js

export function pageTransition(){
  var timeline = gsap.timeline();
  timeline.to("loadingScreen",{
    duration: 1.2,
    width: "100%",
    left: "0",
    ease: "Expo.easeInOut"
  });
  timeline.to("loadingScreen",{
    duration: 1,
    width: "100%",
    left: "100%",
    ease: "Expo.easeInOut",
    delay: 0.3
  });
  timeline.set(".LoadingScreen", { left: "-100%" } );
}

export function contentAnimation(){
  var timeline = gsap.timeline();
  timeline.from("animate-this", {
    duration: 1,
    y: 30,
    opacity: 0,
    stagger: 0.4,
    delay: 0.2
  });
}

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { pageTransition, contentAnimation } from "./utils/helpers";
import { barba } from '../node_modules/@barba/core';

import anim from "./utils/anim";
import "./scss/style.scss";

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

index.html（显示 barba 包装器）

<body data-barba="wrapper">
  <main id="root"></main>
</body>

【问题讨论】：

您是否需要将该文件用作外部脚本？ Barba 似乎也提供了一个易于使用的npm module！
嗨@EmileBergeron - 我已经通过npm 安装了barba 软件包。我的 barba.js 文件只是一个包含我的自定义 barba 相关转换的文件，这就是我要添加到我的页面中的内容。
我在 barba.js 中没有看到任何导入或定义名称 barba 的内容，但您正在尝试调用它的 init() 方法。这是由页面上的另一个脚本全局定义的吗？如果不是，则应该在某处出现错误，例如“无法访问未定义的属性 'init'”。
@solarshado - 你是对的，我没有将imported barba 放入我的barba.js 文件中。我现在已经这样做了，并更新了我上面的问题以展示代码。对于您的第二点，“在某处应该是错误”，这就是问题所在，即使我在 Homepage.js 和 Contact.js 中有 barba.js，我也没有看到任何错误或任何类型的错误。现在我已经完成了导入，仍然是相同的结果。没有错误，也没有过渡。

标签： javascript reactjs barbajs

【解决方案1】：

您实际上可以将以下代码放入 useEffect 中，以在您的 index.js 或您希望的任何文件中创建和加载脚本

useEffect(() => {

const script = document.createElement("script");
script.src = "localfilepath";
script.async = true;
script.defer = true;
document.body.append(script);

 }, []);

【讨论】：

【解决方案2】：

您的导入顺序看起来错误。所有 node_modules 都应该先导入，然后再导入本地文件，例如 App.js

import React from "react";
import ReactDOM from "react-dom";
import { barba } from '../node_modules/@barba/core';


import { pageTransition, contentAnimation } from "./utils/helpers";
import anim from "./utils/anim";

import App from "./App";
import "./scss/style.scss";

或者您可以延迟导入模块并在加载成功时启动应用程序。

(async () => {
  // Dynamically imported module (runtime)
  await import('../node_modules/@barba/core');
  const root = document.getElementById("root");
  ReactDOM.render(<App />, root);
})();

【讨论】：