NPM/WebpackがGSAP TimelineLiteを正しくロードしない

Question

私はリファクタリングし、運用アプリケーションでクリーンアップを実行し、依存関係を最適化しています。

Googleには、移行関連のものでは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

、私は私たちの輸入量から脂肪を取り除きたいと思って、次のように切り替えました：

import { TimelineLite } from 'gsap';

はしかし、これは正しくコンパイルしますが、次のクライアント側のエラーを投げている：これはなぜ

Uncaught TypeError: _gsap.TimelineLite is not a constructor

誰でも知っていますか？ TimelineLiteを単独で輸入することによる重量削減は巨額ではありませんが、その価値はあります。 GSAPライブラリの他の部分を具体的にインポートする必要がありますか？

---

NOTES：

私は運と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ライブラリ全体として。 （笑）好奇心のうち