Loading JS help

[arbel]

i'm a beginner and apologize if this is a stupid question, but I don't completely understand how to load external and local scripts.

I was trying to include https://animejs.com/ into my site. I added an import in index.js to it. but kept getting an error that anime is undefined.

I ended up just adding

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

in my index.html file, but I think this is not the correct way.

Also couldn't quite understand what I had to do to load jquery.

added this to my index.html:
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

and this in webpack.common.js

module.exports = {
mode: 'development',
entry: './src/index.js',
externals: {
jquery: 'jQuery'
},

jquery seems to work, but i'm not sure I did it correct.

thanks

Iadn

[tr1s]

@arbel Np!

In order to use animejs locally through requiring it in the index.js, you need to install the package to node_modules in the project. So in the project terminal you'd run npm install animejs --save and then head over to the index.js and add import anime from 'animejs';. Then you'll be good to go!

As for jQuery, it's a bit confusing and I don't fully understand it myself. Something to do with jQuery being a massive library and exporting itself as a global variable? I'm not entirely sure why it's so complicated. But basically we use it by putting the script in the head like you did, and then telling webpack to treat it as an external library while also defining its variables.

It's best to cover all the bases and add

externals: {
  $: 'jquery',
  jquery: 'jQuery',
  'window.$': 'jquery',
}

instead of just the one line you did. Some tools that use jQuery might use $ the variable and some might use jquery.

Hope that helps!

[arbel]

Thanks for quick reply.

I did what you said, the anime install went fine, and added the import line. but getting an Uncaught ReferenceError: anime is not defined

this is my index.js
'require('offline-plugin/runtime').install();

import './index.html';
import './index.scss';
import anime from 'animejs';
import './scripts/jquery.fittext.js';
import './scripts/tilt.js';
import './scripts/scripts.js';
'
am I importing it correct?

thanks!

Idan

[tr1s]

You know what, I just tested it. If you call anime() in the index.js it works, but if you call anime() in the scripts/script.js it doesn't work...

@shellscape, is there any chance you can shed some light on this since you've worked on Webpack? I'm seeming to have a fundamental misunderstanding of how Webpack works and it's really confusing me. I'm testing this on my personal site, so I actually use some of the things @arbel here is using. For example tilt.js.

I thought the order of the imports in the index.js mattered. How come I can move tilt.js anywhere in the index.js and it works fine? (I'm calling Vanilla-tilt in the scripts/script.js, which is after where I'm defining it)

But yet, when I download animejs, and I call it in the same scripts/script.js where I'm calling tilt... and it doesn't work? (error anime is undefined). But yet you plop a anime() in the index.js and it works?

Any insight would be greatly appreciated. Thanks

[shellscape]

@tr1s I'll do my absolute best to take a look at this today, and see if anything stands out.

[arbel]

also tried loading lottie.
https://www.npmjs.com/package/lottie-web
'npm install lottie-web'
then added
import bodymovin from 'lottie-web';
didn't work

tried
import lottie-web from 'lottie-web';

btw, how do i know what to import?

thanks

[shellscape]

Referencing this SO post: https://stackoverflow.com/questions/49451759/how-to-use-anime-js-or-any-external-library-in-a-vue-cli-project, and examining the default export for anime in both CommonJS and ESM, it looks like you're importing that correctly. Webpack will use anime.es.js, because it's defined with the module field in package.json. There doesn't seem to be anything exotic in your configs either. I rolled a bare bones webpack setup with entry and output, no plugins, an entry.js file which imported (required, since I was using the CommonJS format) animejs, and all went well. Also nested the import of animejs within a file that was imported by entry.js and didn't have any issue. I'm not quite sure what's going on for you all in this situation unfortunately. When I run into these things I tend to strip my config down to it's absolute base/smallest form, and work backwards to identify the culprit. 9 times out of 10 it's something I did in my config.