如何在GSAP和Webpack中使用ScrollMagic

Question

爲了使用ScrollMagic with GSAP，您需要加載animation.gsap.js插件。隨着的WebPack你會做這樣的事情來實現這一目標（假設你使用CommonJS的語法，並與故宮安裝了一切）：

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 

Answer 1

解決方案

你要告訴的WebPack通過將下面的裝載機停用define()方法停止使用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（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); 
} 

我希望這可以防止其他人花費整整一個晚上試圖弄清楚發生了什麼。

Answer 2

medoingthings解決方案已將語法更改爲包含「-loader」後綴。

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

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