NPM/Webpack 不能正确加载 GSAP TimelineLite

Question

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

我们有一个 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

现在，我想 trim 去掉我们导入的脂肪，然后切换到：

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 文件夹结构直接导入 TimelineLite 及其基本依赖项：

import TimelineLite from 'gsap/TimelineLite';

这按预期工作，并且比整个 TweenMax 库节省了 74KB 的重量。 (哈哈)

NPM/Webpack 不能正确加载 GSAP TimelineLite

NPM / Webpack don't load GSAP TimelineLite Correctly

node.js

npm

reactjs

webpack

gsap