Как использовать 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
Источник

5 ответов

Решение

Решение

Вы должны указать 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 (определить) и 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);
}

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

Источник

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

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

Источник

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

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

https://webpack.js.org/guides/migrating/

Источник

У меня была такая же проблема, и я нашел этот вопрос.

Для тех, кто использует Webpack 5, я считаю, что import-loader устарел, поэтому, согласно документам webpack, добавьте этот код в свое правило js, чтобы отключить AMD:

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

документация: https://webpack.js.org/configuration/module/#ruleparser

Источник

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

Надеюсь, это поможет другим.

Источник
Другие вопросы по тегам