如何在ReactJS环境中包括ScrollMagic的GreenSock插件？

Question

如何在我的ReactJS项目中包含ScrollMagic的Greensock插件？

ScrollMagic的作者制作了一些插件，以合并诸如GreenSock和Velocity之类的库。当您将它们简单地包含在html文档的标题中时，它们非常有用]

<script type="text/javascript" src="js/lib/greensock/TweenMax.min.js"></script>
<script type="text/javascript" src="scrollmagic/uncompressed/ScrollMagic.js"></script>
<script type="text/javascript" src="scrollmagic/uncompressed/plugins/animation.gsap.js"></script>

但是当您使用ReactJS时，不会像这样导入javascript资源。实际上，您实际上必须通过npm命令之类的过程导入它们，然后在您的react项目中声明它们，例如

import ScrollMagic from "scrollmagic"

尽管我能够将ScrollMagic导入到react文件中并开始使用scrollmagic，但是我仍无法导入greensock插件。没有有关如何执行此操作的文档。我试图通过将animation.gsap.js中的代码段粘贴到node_modules/scrollmagic/scrollmagic.js文件中来破解这些东西（编辑这些文件不是一个好主意），但是它要么破坏了webpack编译器，要么破坏了它。破坏了我的项目代码。

如何在反应环境中使用greensock插件进行滚动魔术？

Answer 1

我能够建立一个包装器。在高层次上，我所做的是研究plugins/animation.gsap.js的代码，提取了我需要的那些Scene扩展属性，更改了名称空间，并在导出之前在单独的react类中增强了ScrollMagic的行为。

Answer 2

升级此问题1个月后，我想我找到了不错的解决方案。因此，此问题表明在React环境中我们无法获取animation.gsap文件。此修复程序不需要对Webpack进行任何更改，但animation.gsap文件本身除外。