如何在 GSAP 和 Webpack 中使用 ScrollMagic答案

【问题标题】：How To Use ScrollMagic with GSAP and Webpack如何在 GSAP 和 Webpack 中使用 ScrollMagic
【发布时间】：2016-06-02 13:12:30
【问题描述】：

要使用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

【问题讨论】：

标签： javascript webpack commonjs gsap scrollmagic

【解决方案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（定义）和 CommonJS（要求）语法。这就是为什么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);
}

我希望这可以防止其他人花费一整个晚上试图弄清楚发生了什么。

【讨论】：

仅供参考，正则表达式中缺少$：{ test: /\.js$/, loader: 'imports?define=>false'}
只想补充一点，如果您尝试将这个灵魂与 webpack 5 一起使用，它将无法工作，至少它不适合我。我最终添加了 parser: { amd: false } 并且成功了。文档链接：webpack.js.org/configuration/module/#ruleparser

【解决方案2】：

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

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

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

【讨论】：

感谢您的提醒！添加了注释。

【解决方案3】：

我遇到的不需要您更改 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 和 imports-loader 0.8.0

【讨论】：

【解决方案4】：

在 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;'
      }
    }
  ]
}

希望这对其他人有所帮助。

【讨论】：

【解决方案5】：

我遇到了同样的问题，发现了这个问题。

对于那些使用 Webpack 5 的人，我相信 import-loader 已经过时了，所以根据 webpack 文档，将此代码添加到您的 js 规则中以禁用 AMD：

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

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

【讨论】：