Jump to content
GreenSock

OSUblake

ES6 Modules Proof of Concept

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Yes please! Blake, tell me you found that magic flag we cant set for instant compatibility with every build system in the entire JS ecosystem! ;)

  • Like 2
Link to comment
Share on other sites

I see, thx Blake. I assumed you wanted to start w/ cleaner classes where .ts would help. 
I believe that HTML standard still have to come up for the standards on modules. For now my fave is Webpack - but the usable thing today is HTML5 Web Components or AMP (in-lined .css). I don't think GSAP by self is a module - an interactive 'stars' rating system would be a module (that has GSAP).
Webpack by self is not rewarding due to effort level.
So I think best to wait for HTML standards to define a module. 

Anyway - this is outside of my depth, good luck and thx as always.

Vic

Link to comment
Share on other sites

  • 2 weeks later...

Just chiming in to say, that a lot many projects now use ES6 from the start. As others have pointed out, module bundlers like Rollup, Webpack, and SystemJS have been there for quite some time, and one does not need to wait for finalisation of Module syntax, or even their implementation. If github stars were to be taken a measure of popularity / usage, then Webpack (19k) stars is pretty close to Gulp (23k) and rising faster than traditional build systems.

 

Screen_Shot_2016_10_03_at_11_28_32_PM.pn

 

While it's cool if the GSAP team wants to focus on improving core animation, there hasn't been a better time to implement ES6 modules now that the bundling ecosystem has become comfortably mature and some of the many popular libraries are being re-written in ES6. There's hardly any reason to wait for browsers to implement the syntax ( a good 3-4 years before anyone starts using modules as it is). As far as maintaining separate builds are concerned, they almost never require separate maintenance, apart from a one time configuration, which gives you compatibility with UMD, ES6, and browser builds out of the box.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

It's nice to nom install and get `import { TweenLite, Elastic, CSSPlugin, TimelineLite } from "gsap";` Is there anyway to import Draggable like this?

Link to comment
Share on other sites

The main (entry) JS file that the "gsap" package points to is TweenMax.js but since Draggable isn't part of TweenMax, it wouldn't work to just import from there. Sorry. We do plan to restructure things at some point, but we're not there yet (doing so isn't trivial). In the mean time, you should be able to just import the Draggable file directly (not from "gsap") or set up an alias in your config file that associates "Draggable" to that file path. Let us know if you need help with that. 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×