为了使用ScrollMagic with GSAP,你需要加载animation.gsap.js
插件。使用Webpack,你可以这样做(假设你使用CommonJS语法,并且用npm安装了所有东西):
var TweenMax = require('gsap');
var ScrollMagic = require('scrollmagic');
require('ScrollMagicGSAP');
为了确保这确实有效,您必须向Webpack配置添加一个别名,以便Webpack知道插件所在的位置。
resolve: {
alias: {
'ScrollMagicGSAP': 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap'
}
}
不幸的是,当您使用此配置和上面的CommonJS语法时,ScrollMagic一直抛出错误。
(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js
5条答案
按热度按时间t1qtbnec1#
解决方案
您必须通过添加以下停用
define()
方法的加载程序来告诉Webpack停止使用AMD语法。"为什么"
问题在于Webpack支持AMD(define)* 和 * CommonJS(require)语法。这就是为什么
plugins/animation.gsap.js
中的以下工厂脚本会跳转到第一个if语句,并在无提示的情况下失败。这就是为什么setTween()
等从未被添加到ScrollMagic构造函数中。通过告诉Webpack不支持AMD语法(使用上面提到的加载程序),插件正确地跳转到第二个if语句,包含CommonJS语法。
我希望这能防止其他人花一整晚的时间试图弄清楚到底发生了什么。
hyrbngr72#
我遇到的解决方案不需要您修改webpack.config.js文件,并且实际上对我有效,可以在下面找到:https://github.com/janpaepke/ScrollMagic/issues/665
其要点是确保通过npm添加了ScrollMagic和GSAP(希望这是显而易见的)以及imports-loader:
然后在您想要使用ScrollMagic和GSAP的文件中执行以下导入操作:
使用Webpack 4.x和导入加载程序0.8.0
zf2sa74q3#
medoingthings解决方案后来更改了语法以包含“-loader”后缀。
https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
r55awzrz4#
在imports-loader 1.1.0中,配置的语法发生了一些变化,因此现在您必须使用以下命令来使ScrollMagic插件工作:
希望这对其他人有帮助。
vddsk6oq5#
我也遇到了同样的问题,发现了这个问题。
对于那些使用Webpack 5的人,我认为imports-loader已经过时了,所以根据Webpack文档,将以下代码添加到您的js规则中以禁用AMD:
文件:https://webpack.js.org/configuration/module/#ruleparser