NPM / Webpack 无法正确加载 GSAP TimelineLite答案

【问题标题】：NPM / Webpack don't load GSAP TimelineLite CorrectlyNPM / Webpack 无法正确加载 GSAP TimelineLite
【发布时间】：2017-10-06 17:04:08
【问题描述】：

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

我们有一个 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 和所有缓动

现在，我想减少我们的导入，并切换到：

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

【问题讨论】：

出于好奇，如果您尝试以下操作会发生什么情况：import * as temp from 'gsat'; 然后cosnole.log(Object.keys(temp);？
好主意。有趣的！我得到：["default"] 并且只记录temp 给我{ default: {} }
好的，import TimelineLite from 'gsap/TimelineLite' 怎么样？
NPM 指令表明你做对了……也许可以试试const TimelineLite = require('gsap/TimelineLite');
@derek 查看我刚刚发布的答案。您最终是正确的，GSAP 似乎没有以标准方式设置导出，因此直接通过文件树导入库是最干净的方式

标签： node.js reactjs npm webpack gsap

【解决方案1】：

在玩弄了设置并与一些 GSAP 维护人员交谈后，我设法让一切正常工作。

原来TimelineLite 依赖于许多GSAP 的其他内部包，例如TweenLite 和CSSPlugin - 您也必须以正确的顺序独立加载它们。

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

import TimelineLite from 'gsap/TimelineLite';

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

【讨论】：