如何将ScrollMagic与GSAP和Webpack配合使用

ma8fv8wu  于 2022-12-04  发布在  Webpack
关注(0)|答案(5)|浏览(438)

为了使用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
t1qtbnec

t1qtbnec1#

解决方案

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

// Webpack 4+
module: {
  rules: [
    { parser: { amd: false }}
  ]
}

// Webpack <= 3
// Don’t forget to install the loader with `npm install imports-loader --save-dev`
module: {
  loaders: [
    { test: /\.js$/, loader: 'imports-loader?define=>false'}

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

"为什么"
问题在于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);
}

我希望这能防止其他人花一整晚的时间试图弄清楚到底发生了什么。

hyrbngr7

hyrbngr72#

我遇到的解决方案不需要您修改webpack.config.js文件,并且实际上对我有效,可以在下面找到:https://github.com/janpaepke/ScrollMagic/issues/665
其要点是确保通过npm添加了ScrollMagic和GSAP(希望这是显而易见的)以及imports-loader:

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和导入加载程序0.8.0

zf2sa74q

zf2sa74q3#

medoingthings解决方案后来更改了语法以包含“-loader”后缀。

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

https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

r55awzrz

r55awzrz4#

在imports-loader 1.1.0中,配置的语法发生了一些变化,因此现在您必须使用以下命令来使ScrollMagic插件工作:

{
  test: [
    path.join(config.root, '/node_modules/scrollmagic/scrollmagic/uncompressed/plugins/jquery.ScrollMagic.js'),
    path.join(config.root, '/node_modules/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js')
  ],
  use: [
    {
      loader: 'imports-loader',
      options: {
        additionalCode: 'var define = false;'
      }
    }
  ]
}

希望这对其他人有帮助。

vddsk6oq

vddsk6oq5#

我也遇到了同样的问题,发现了这个问题。
对于那些使用Webpack 5的人,我认为imports-loader已经过时了,所以根据Webpack文档,将以下代码添加到您的js规则中以禁用AMD:

{
            test: /\.js$/,
            include: /node_modules/,
            parser: {
                amd: false
            }
        }

文件:https://webpack.js.org/configuration/module/#ruleparser

相关问题