Question

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

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

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

import 'gsap';

根据GSAP npm docs （https://www.npmjs.com/package/gsap） ......

默认（主）文件是TweenMax，它还包括TweenLite，TimelineLite，TimelineMax，CSSPlugin，RoundPropsPlugin，BezierPlugin，AttrPlugin，DirectionalRotationPlugin和所有缓动

现在，我想从我们的导入中削减脂肪，并切换到：

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

Answer 1

在玩完设置并与一些GSAP维护者交谈之后，我设法让事情变得有效。

结果TimelineLite取决于许多GSAP的其他内部软件包，例如TweenLite和CSSPlugin - 您还必须以正确的顺序独立加载它们。

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

import TimelineLite from 'gsap/TimelineLite';

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

NPM / Webpack无法正确加载GSAP TimelineLite

1 个答案: