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

Question

I'm implementing barba JS on my React website but can't seem to get the file to work on the page.我正在我的React网站上实现barba JS ，但似乎无法让文件在页面上工作。 For reference, my folder structure is as follows:作为参考，我的文件夹结构如下：

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

On my index.js file, I'm trying to import my anim.js script so that the file is applied to all my pages .在我的index.js文件中，我试图import我的anim.js脚本，以便将该文件应用于我的所有pages 。 However, upon compilation, I'm getting a 'delay' is not defined no-undef error on anim.js , even though delay is defined (because I'm importing gsap ).但是，在编译时，即使定义了delay （因为我正在导入gsap ），我也会在anim.js上收到一个'delay' is not defined no-undef错误。

Homepage.js ( Contact.js is similar, only difference being the data-barba-namespace ) 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动画.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 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索引.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 (shows barba wrapper) index.html （显示barba包装器）

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

Answer 1

You can actually put the below code inside useEffect to create and load script in your index.js or which ever file you wish您实际上可以将以下代码放在 useEffect 中以在您的 index.js 或您希望的任何文件中创建和加载脚本

useEffect(() => {

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

 }, []);

Answer 2

Your sequence of imports looks wrong.您的导入顺序看起来不对。 All node_modules should be imported first before local files like App.js所有 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";

Or you can lazy import module and initiate app on load success.或者您可以延迟导入模块并在加载成功时启动应用程序。

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

Read More: https://www.aleksandrhovhannisyan.com/blog/react-lazy-dynamic-imports/阅读更多： https : //www.aleksandrhovhannisyan.com/blog/react-lazy-dynamic-imports/

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

问题描述

2 个解决方案

解决方案1
0 2021-10-10 17:45:48

解决方案2
0 2021-10-16 16:51:10

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

问题描述

2 个解决方案

解决方案1 0 2021-10-10 17:45:48

解决方案2 0 2021-10-16 16:51:10

解决方案1
0 2021-10-10 17:45:48

解决方案2
0 2021-10-16 16:51:10