javascript - How to import multiple custom JS files into one main 'app.js' file? - Stack Overflow

admin管理员组

文章数量:1122832

I am using Webpack for my website and in my src/js/ I have created three files ; app.js, gsap-animations.js and script.js. My initial idea was to import my other custom js files into one single js file (in this case app.js) just like this :

// -------------------------------------------------------------------
// ----- import node_modules scripts
// -------------------------------------------------------------------

import $ from "jquery";
import "bootstrap";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";


// -------------------------------------------------------------------
// ----- import custom scripts
// -------------------------------------------------------------------

import "./script.js";
import "./gsap-animations.js";

The first custom file, script.js, loads up fine ; I am using jquery and have functions in there that I can see loaded up on my website. It's clearly doing things. Weirdly enough though, the second custom file, gsap-animations.js, does not ever load. I was just testing around as I am pretty new with GSAP to begin with :

gsap.to('.test-img', {
    ScrollTrigger: '.test-img',
    y: 500,
    duration: 3
});

This is supposed to make my image move on the y axis whenever it comes into the viewport.

After some fiddling around, I realized that if I move the import gsap from "gsap"; AND import scrollTrigger from "gsap/ScrollTrigger"; INTO gsap-animations.js, IT WORKS. The question is WHY ?

Am I missing something ? Clearly, I use jquery in script.js but have the import $ from "jquery"; in the app.js file, not script.js. I am able to use jquery in script.js just fine though.

So why when it comes to GSAP I have to load it up in the specific file where I am using GSAP ? Am I just too dumb to notice something obvious here ?

Sorry, I know this is pretty newbie. I'm just confused and this is also extremely hard to explain so feel free to ask for clarification.

本文标签： javascriptHow to import multiple custom JS files into one main 39appjs39 fileStack Overflow