Как использовать ScrollMagic с GSAP и Webpack

Чтобы использовать 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'
  }
}

К сожалению, ScrollMagic продолжает выдавать ошибку, когда вы используете эту конфигурацию и синтаксис CommonJS, как указано выше.

(ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

Ответ 1

Решение

Вы должны сказать Webpack прекратить использование синтаксиса AMD, добавив следующий загрузчик, который деактивирует метод define().

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). Вот почему следующий factory script внутри plugins/animation.gsap.js перескакивает в первый оператор if и терпит неудачу. Вот почему setTween() и т.д. Никогда не добавляются в ScrollMagic Constructor.

Говоря 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);
}

Надеюсь, это мешает другим людям провести целый вечер, пытаясь понять, что происходит.

Ответ 2

Решение medoingthings с тех пор изменило синтаксис, чтобы включить суффикс "-loader".

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

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