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

чтобы использовать ScrollMagic с "ГСАП", вам нужно загрузить 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
10
commonjs gsap javascript scrollmagic webpack

3 ответов

Решение

вы должны сказать 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). Вот почему следующий фабричный скрипт внутри plugins/animation.gsap.js прыжки в первое утверждение if и терпит неудачу молча. Вот почему setTween() etc. никогда не добавляются в конструктор 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);
}

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

18

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

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

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

1

решение, с которым я столкнулся, не требует изменения вашего webpack.конфиг.JS файл и на самом деле работает для меня можно найти здесь:https://github.com/janpaepke/ScrollMagic/issues/665

суть в том, чтобы убедиться, что у вас есть ScrollMagic и GSAP, добавленные через npm (надеюсь, это очевидно), а также 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

0