NPM / Webpack不能正确加载GSAP TimelineLite

我正在重构和运行生产应用程序清理，并优化依赖关系。

我们有一个React组件，它使用GSAP来处理一些与转换相关的东西，但只有TimelineLite库。 这些都是简单的东西，没有任何困难或任何事情，所以我们不需要任何更复杂的GSAP项目，现在可以将它们擦除以优化。

最初，我们只是通过NPM导入了整个GSAP库，如下所示：

import 'gsap';

根据GSAP npm文档（ https://www.npmjs.com/package/gsap ） …

默认（主）文件是TweenMax，其中还包括TweenLite，TimelineLite，TimelineMax，CSSPlugin，RoundPropsPlugin，BezierPlugin，AttrPlugin，DirectionalRotationPlugin和所有的轻松

现在，我想减less我们的import脂肪，并切换到：

import { TimelineLite } from 'gsap';

但是，这是编译正确，但抛出以下客户端错误：

Uncaught TypeError: _gsap.TimelineLite is not a constructor

有人知道为什么吗？ 仅通过importTimelineLite节省的体重并不是很大，但是值得一做。 我是否需要专门导入GSAP库的其他部分？

---

笔记：

我也尝试import { TweenLite, TimelineLite } from 'gsap'; 没有运气。 奇怪的是， import { TweenMax, TimelineLite } from 'gsap'; 也不工作，但从import { TweenMax } from 'gsap'; 确实。

这里是我们正在使用的animation，超级基本：

  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依赖于许多GSAP的其他内部软件包，比如TweenLite和CSSPlugin ，而且你也必须独立地加载它们，并且按照正确的顺序。

我发现最简单的方法是直接通过GSAP npm文件夹结构导入TimelineLite及其基本依赖关系：

import TimelineLite from 'gsap/TimelineLite';

这可以像预期的那样工作，并且整体上比TweenMax库节省了74KB的重量。 （哈哈）