JamesGrubb Posted August 21, 2020 Share Posted August 21, 2020 Hello, sorry no visuals for this question. Im trying to setup Gsap with eleventy.js a static site generator. I would like to use module imports, but should I be using the CDN instead? Also If I use the CDN and and my index.html links to a main.js file how do I reference gsap inside of the main.js file. I realise these are general javascript questions so appologies. Link to comment Share on other sites More sharing options...
elegantseagulls Posted August 21, 2020 Share Posted August 21, 2020 Hi James, I'm not familiar with eleventy, but I assume if you wanted to use module imports it should be just fine... The trick for static sites, you'll generally want to import GSAP's plugins from umd (import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';). If you use the CND, which should work very well, as well, you'll write gsap, as gsap... you may need to create an exception/reference somewhere (likely your linter exception list) so that your env/linter knows about it. 2 Link to comment Share on other sites More sharing options...
Dipscom Posted August 21, 2020 Share Posted August 21, 2020 If I understood Eleventy's proposition correctly, I would suggest using the CDN. There is no need to bundle GSAP with you JS bundle. You can have it cached in the user's browser and all the goodies that come with it. If you end up using the CDN, you don't need to do much from the JavaScript point of view other than make sure it is loaded before your main.js file. And you'll have to tell you code editor knows you're referencing an external library not present in your environment, just like the Seaguls so elegantly put. 2 1 Link to comment Share on other sites More sharing options...
JamesGrubb Posted August 21, 2020 Author Share Posted August 21, 2020 Hi Thank you for your replies. I have not come across exception/reference before. I ha a wild stab in the dark writing a jsconfig.json file and including the following code: "typeAcquisition": { "include": [ "gsap" ] } Link to comment Share on other sites More sharing options...
GreenSock Posted August 21, 2020 Share Posted August 21, 2020 2 hours ago, elegantseagulls said: you'll generally want to import GSAP's plugins from umd (import { ScrollTrigger } from 'gsap/umd/ScrollTrigger';). Just for the record, I think @elegantseagulls meant /dist/ instead of /umd/ import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; Which gets you the ES5 UMD file (highly compatible). 1 Link to comment Share on other sites More sharing options...
JamesGrubb Posted August 21, 2020 Author Share Posted August 21, 2020 Thanks. Im only just getting my head around static file generators. Hows your knowledge? As I can fathom a common practice is to serve files and folders from a 'build' or 'public' or 'dist' folder. Should I copy the entire gsap node_module to the dist folder (for example) so I can reference it with import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; Link to comment Share on other sites More sharing options...
JamesGrubb Posted August 21, 2020 Author Share Posted August 21, 2020 ...but I will want to minify the javascript before build? Link to comment Share on other sites More sharing options...
GreenSock Posted August 21, 2020 Share Posted August 21, 2020 6 minutes ago, JamesGrubb said: Im only just getting my head around static file generators. Hows your knowledge? I'm the wrong guy to ask. I have almost zero experience, sorry. Maybe someone else will chime in, or perhaps this is the wrong kind of forum to ask this kind of question. We're pretty focused on GSAP-specific questions around here Like @Dipscom said, you could probably just use the CDN link(s) because those are already minified and give you the benefit of being widely cached. Link to comment Share on other sites More sharing options...
JamesGrubb Posted August 21, 2020 Author Share Posted August 21, 2020 Yeah let's leave it at that. Thanks so much for your time anyway. Link to comment Share on other sites More sharing options...
elegantseagulls Posted August 21, 2020 Share Posted August 21, 2020 36 minutes ago, GreenSock said: Just for the record, I think @elegantseagulls meant /dist/ instead of /umd/ import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; Which gets you the ES5 UMD file (highly compatible). Yep. Hadn't had my morning coffee. Post is updated. 1 Link to comment Share on other sites More sharing options...
elegantseagulls Posted August 21, 2020 Share Posted August 21, 2020 26 minutes ago, JamesGrubb said: Should I copy the entire gsap node_module to the dist folder (for example) Nope. The dist folder is already in the node_module dir for gsap, so no need (moving your files out of node_modules would basically defeat the purpose of installing them that way). Link to comment Share on other sites More sharing options...
Dipscom Posted August 23, 2020 Share Posted August 23, 2020 On 8/21/2020 at 5:53 PM, JamesGrubb said: Thanks. Im only just getting my head around static file generators. Hows your knowledge? As I can fathom a common practice is to serve files and folders from a 'build' or 'public' or 'dist' folder. Should I copy the entire gsap node_module to the dist folder (for example) so I can reference it with import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; As with everything in life, it depends. With the exception of copying the gsap folder from node_modules, as explained ealier by an entire flock of smartly dressed seagulls, serving files and folders from a 'build', 'public' folder comes down to your needs and if those assets already exist somewhere else. There are arguments in favor and against for both approaches. You'll be better off understanding why you would want to use one over the other and when to do so. For GSAP itself, the non-club plugins, there's minimal advantage to include them in your bundle. So, slap that CDN link on your project and code away happly. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now