如何在GSAP和Webpack中使用ScrollMagic

Question

要将ScrollMagic与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

Answer 1

解决方案

您必须通过添加以下用于停用define()方法的加载程序来告诉Webpack停止使用AMD语法.

module: {
  loaders: [
    { test: /\.js$/, loader: 'imports-loader?define=>false'}

    // Use this instead, if you’re running Webpack v1
    // { test: /\.js$/, loader: 'imports?define=>false'}
  ]
}

不要忘记安装装载机npm install imports-loader --save-dev .

为什么？

问题在于Webpack支持AMD(define)和 CommonJS(require)语法.这就是为什么以下工厂脚本plugins/animation.gsap.js跳转到第一个if语句并静默失败的原因.这就是为什么setTween()等永远不会添加到ScrollMagic构造函数.

通过告诉Webpack不支持AMD语法(使用上面提到的加载器),插件正确地跳转到第二个if语句,包含CommonJS语法.

if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['ScrollMagic', 'TweenMax', 'TimelineMax'], factory);
} else if (typeof exports === 'object') {
    // CommonJS
    // Loads whole gsap package onto global scope.
    require('gsap');
    factory(require('scrollmagic'), TweenMax, TimelineMax);
} else {
    // Browser globals
    factory(root.ScrollMagic || (root.jQuery && root.jQuery.ScrollMagic), root.TweenMax || root.TweenLite, root.TimelineMax || root.TimelineLite);
}

我希望这可以阻止其他人花一整晚来试图弄清楚发生了什么.

Answer 2

我遇到的解决方案不需要您更改您的 webpack.config.js 文件并且实际上对我有用，可以在这里找到：https : //github.com/janpaepke/ScrollMagic/issues/665

它的要点是确保您通过 npm（希望这很明显）以及导入加载器添加了 ScrollMagic 和 GSAP：

npm install --save scrollmagic gsap
npm install --save-dev imports-loader

然后在要使用 ScrollMagic 和 GSAP 的文件中执行以下导入：

import { TimelineMax, TweenMax, Linear } from 'gsap';
import ScrollMagic from 'scrollmagic';
import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';

使用 Webpack 4.x 和 import-loader 0.8.0