जीएसएपी और वेबपैक के साथ स्क्रॉलमैजिक का उपयोग कैसे करें

Question

ScrollMagic with GSAP का उपयोग करने के लिए, आपको animation.gsap.js प्लगइन लोड करने की आवश्यकता है। Webpack के साथ आप कुछ इस तरह करना होगा पूरा करने के लिए है कि (यह मानते हुए आप CommonJS वाक्य रचना और NPM के साथ स्थापित सब कुछ का उपयोग करें):

var TweenMax = require('gsap'); 
var ScrollMagic = require('scrollmagic'); 
require('ScrollMagicGSAP'); 

यकीन है कि यह वास्तव में काम करता है बनाने के लिए, आप अपने 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() विधि निष्क्रिय जोड़कर एएमडी सिंटेक्स के उपयोग को रोकने के लिए किया है।

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 साथ लोडर स्थापित करने के लिए मत भूलना।

क्यों?

समस्या इस तथ्य में निहित है कि वेबपैक एएमडी (परिभाषित) और कॉमनजेएस (आवश्यकता) वाक्यविन्यास का समर्थन करता है। यही कारण है कि plugins/animation.gsap.js के भीतर निम्नलिखित फैक्ट्री स्क्रिप्ट पहले कथन में कूद जाती है और चुपचाप विफल हो जाती है। यही कारण है कि setTween() इत्यादि स्क्रॉलमैजिक कन्स्ट्रक्टर में कभी नहीं जोड़ा जाता है।

वेबपैक को एएमडी सिंटैक्स (उपरोक्त वर्णित लोडर का उपयोग करके) का समर्थन न करने के लिए, प्लगइन सही ढंग से अगर कथन सही ढंग से कूदता है, तो कॉमनजेएस सिंटैक्स को गले लगाकर।

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 समाधान ने बाद में "-लोडर" प्रत्यय को शामिल करने के लिए वाक्यविन्यास बदल दिया है।

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

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