NPM/Webpack에서 GSAP TimelineLite를 올바르게로드하지 않습니다.

Question

프로덕션 응용 프로그램에서 리팩터링 및 정리를 실행하고 종속성을 최적화합니다.

일부 전환 관련 항목에는 GSAP를 사용하는 React 구성 요소가 있지만 TimelineLite 라이브러리 만 있습니다. 그것은 모든 간단한 것들, 어떤 지장이나 아무것도없이, 그래서 우리는 더 복잡한 GSAP 항목에 대한 필요가 없으며 이제 그들을 최적화 할 수 있습니다.

원래, 우리는 그냥과 같이 NPM을 통해 전체 GSAP 라이브러리를 수입 : 지금 GSAP의 NPM 워드 프로세서 (https://www.npmjs.com/package/gsap) 당

import 'gsap';

...

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

, 나는 우리 수입에서 지방을 다듬어서 다음으로 바꾸고 싶습니다.

,210

그러나이 올바르게 컴파일하지만 다음과 같은 클라이언트 측 오류 던지고있다 :이 왜

Uncaught TypeError: _gsap.TimelineLite is not a constructor

사람이 알고 있나요을? TimelineLite 만 가져올 경우 무게가 크게 줄어들지는 않지만 가치가 있습니다. GSAP 라이브러리의 다른 부분을 구체적으로 가져와야합니까?

---

참고 : 나는 또한 행운과 import { TweenLite, TimelineLite } from 'gsap';을 시도

. 이상하게도 import { TweenMax, TimelineLite } from 'gsap';은 작동하지 않지만 import { TweenMax } from 'gsap';은 작동하지 않습니다.

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

GSAP 테이너의 일부 설정과 장난과 이야기 후, 나는이 일 것을 얻을 수 있었다 : 여기

슈퍼 기본적인 우리가 사용하고있는 애니메이션이다.

밖으로 나가십시오 TimelineLite은 TweenLite 및 CSSPlugin과 같은 GSAP의 다른 내부 패키지 수에 따라 다르며 올바른 순서로 독립적으로로드해야합니다.

내가 가장 쉬운 방법은 기본 종속성, 혼자 TimelineLite를 가져올 것을 발견의 GSAP NPM 폴더 구조를 통해 직접입니다 :

기대 이상 절약 74킬로바이트 무게를 제공하기 때문에이 작동 import TimelineLite from 'gsap/TimelineLite';

TweenMax 라이브러리 전체. 는 (하하) 호기심에서