NPM/Webpack ne se charge pas GSAP TimelineLite correctement

Question

Je suis en train de refactoriser et d'exécuter le nettoyage sur une application de production, et d'optimiser les dépendances.

Nous avons un composant React qui utilise GSAP pour certaines choses liées à la transition, mais seulement la bibliothèque TimelineLite. Tout est simple, sans aucune facilité ou quoi que ce soit, donc nous n'avons besoin d'aucun des éléments GSAP les plus complexes et nous pouvons maintenant les éliminer pour les optimiser.

A l'origine, nous venons d'importer toute la bibliothèque GSAP via NPM comme ceci:

import 'gsap';

par les MNP GSAP docs (https://www.npmjs.com/package/gsap) ...

The default (main) file is TweenMax which also includes TweenLite, TimelineLite, TimelineMax, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin, and all of the eases

Maintenant, je aimerait couper le gros de notre importation, et est passé à:

import { TimelineLite } from 'gsap';

Cependant, cette compile correctement, mais en jetant l'erreur du côté client suivant:

Uncaught TypeError: _gsap.TimelineLite is not a constructor

Est-ce que quelqu'un sait pourquoi est-ce? Nos économies de poids de l'importation TimelineLite seuls ne sont pas énormes, mais ils valent la peine. Dois-je importer d'autres parties des bibliothèques GSAP spécifiquement?

---

NOTES:

J'ai aussi essayé import { TweenLite, TimelineLite } from 'gsap'; sans chance. Étrangement, import { TweenMax, TimelineLite } from 'gsap'; ne fonctionne pas non plus, mais import { TweenMax } from 'gsap'; fait.

Voici l'animation que nous utilisons, super base:

new TimelineLite() 
    .to('#urlCopyMessage', 0, { visibility: 'visible', opacity: 1 }) 
    .fromTo('#urlCopyMessage', 0.35, 
     { opacity: 0, y: 20 }, 
     { opacity: 1, y: -30 } 
    ) 
    .to('#urlCopyMessage', 0.35, 
     { opacity: 0, delay: 0.25 } 
    ) 
    .to('#urlCopyMessage', 0, { visibility: 'hidden' }); 

Answer 1

Après avoir joué avec la configuration et de parler avec quelques-uns des mainteneurs GSAP, j'ai réussi à faire fonctionner les choses.

Turns out TimelineLite dépend d'un certain nombre d'autres paquets internes de GSAP, comme TweenLite et CSSPlugin - et vous devez les charger indépendamment, aussi, et dans le bon ordre.

J'ai trouvé que la meilleure façon d'importer TimelineLite, seul, avec ses dépendances de base, est directement via la structure du dossier NPM GSAP:

import TimelineLite from 'gsap/TimelineLite';

Cela fonctionne comme prévu et fournit un gain de poids 74Ko sur la bibliothèque TweenMax dans son ensemble. (Haha)