NPM/Webpack無法正確加載GSAP TimelineLite

我正在重構並在生產應用程序上運行清理，並優化了依賴關係。NPM/Webpack無法正確加載GSAP TimelineLite

我們有一個React組件，它使用GSAP處理一些與轉換相關的東西，但只有TimelineLite庫。這些都是簡單的東西，沒有任何困難或任何事情，所以我們不需要任何更復雜的GSAP項目，現在可以將它們擦除以優化。

最初，我們只是通過NPM進口全GSAP庫，像這樣：

import 'gsap';

％的GSAP NPM文檔（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

現在，我'd想修剪我們進口的脂肪，並切換到：

import { TimelineLite } from 'gsap';

然而，這是正確的，但編譯拋出下面的客戶端錯誤：

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' });

來源

2017-10-06 Zfalen

出於好奇，會發生什麼，如果你嘗試類似： '*進口從 'GSAT' 溫度;'然後'cosnole.log（Object.keys（TEMP）;' –

？好主意！有趣！我得到：'[「default」]'並且只記錄'temp'給了我'{default：{}}' – Zfalen

好吧，從'gsap/TimelineLite''導入TimelineLite怎麼樣？ –

與設置玩一起聊天與一些GSAP維護者後，我好不容易纔得到的東西的工作。

原來TimelineLite是取決於許多GSAP的其他內部包，像TweenLite和CSSPlugin - 你必須單獨加載它們，也和正確的順序。

我發現，最簡單的方法導入TimelineLite，獨自一人，其基本依賴關係，是直接通過GSAP NPM文件夾結構：

import TimelineLite from 'gsap/TimelineLite';

可正常工作，並提供了74KB重量減輕了TweenMax庫作爲一個整體。 （哈哈）

來源

2017-10-06 18:17:28 Zfalen

NPM/Webpack無法正確加載GSAP TimelineLite

回答

相關問題