वेबपैक

Question

में सिंक्रोनस की आवश्यकता है मैं वेबपैक का उपयोग कर रहा हूं और मैं कुछ पैकेजों को खींचने के लिए उपयोग कर रहा हूं। मेरे पास दो पैकेज हैं: package1.js और package2.js। package1.js बस कुछ गुणों के साथ एक वस्तु बनाता है जिसे pkg1 कहा जाता है। package2 एक जावास्क्रिप्ट फ़ाइल है जिसमें एक स्व निष्पादन कार्य होता है जो पैकेज 1 को बढ़ाता है। जैसे

package2.js:

require('package1') 
require('package2') 

जब मैं ऐसा करते हैं, मैं एक त्रुटि मिलती है:

!function() { 
    pkg1.prototype.newFunction = function {return "foo"}; 
}() 

मैं निम्नलिखित तरीके से एक नई स्क्रिप्ट में इन दोनों की आवश्यकता के लिए कोशिश कर रहा हूँ:

Uncaught TypeError: pkg1.newFunction is not a function 

मुझे लगता है कि इस Javascripts अतुल्यकालिक लोड हो रहा है की वजह से है: require(package2)से पहले निष्पादित करता है। इस के लिए मेरे सबूत नहीं है कि जब मैं निम्नलिखित करना मैं एक त्रुटि नहीं मिलता है:

require('package1') 
!function() { 
    pkg1.prototype.newFunction = function {return "foo"}; 
}() 

बहरहाल, यह बहुत गंदा है, और मैं का उपयोग करने की आवश्यकता होती है चाहते हैं। मैं यह काम करने के बारे में कैसे जाऊं?

संपादित करें:,, इसलिए

(function() { 
    L.HexbinLayer = L.Class.extend({ 
    ... 
})() 

कम से कम मेरी समझ के लिए एक require(leaflet-d3-plugin) में डाल इस स्क्रिप्ट निष्पादित और L जो लाया जाता है का विस्तार करने के लिए पैदा करना चाहिए: विशिष्ट उदाहरण

leaflet-d3 plugin साथ शुरू होता है require('leaflet')

इसी प्रकार, d3-hexbin-v0 से शुरू होता है:

!function(){d3.hexbin=function(){ 
    ... 
}}() 

फिर से, जिस तरह से मैं इस पढ़ा है कि इस स्क्रिप्ट बस d3 करने के लिए एक .hexbin विधि कहते है।

अब अगर मैं सिर्फ एचटीएमएल लिख रहे थे, मैं सिर्फ विभिन्न स्क्रिप्ट टैग में इन अलग अलग चीजें डाल और यह सिर्फ काम करता है:

<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://d3js.org/d3.hexbin.v0.min.js"></script> 

या

<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script> 
<script src="static/leaflet-d3.min.js" charset="utf-8"></script> 

लेकिन चूंकि मैं उपयोग कर रहा हूँ webpack , मुझे केवल इन पुस्तकालयों को एनपीएम के साथ स्थापित करने के बाद इन पुस्तकालयों की आवश्यकता और/या आयात करने में सक्षम होना चाहिए या यदि मैं इन स्क्रिप्ट में .js को कुछ निर्देशिका में कॉपी करता हूं और फिर require उन्हें उस स्थान से कॉपी करता हूं। दुर्भाग्यवश, यह तब तक काम नहीं कर रहा है जब तक कि मैं इन मॉड्यूल में .js को सीधे जो भी स्क्रिप्ट लिख रहा हूं उसे कॉपी नहीं करता। यही वह है जिसे मैं टालने की कोशिश कर रहा हूं।

उदा।

import * as d3 from 'd3'; \\I'm using d3 v4 here. 
require('/resources/d3-hexbin.min.js') 

परिणामों में:

Uncaught TypeError: d3.hexbin is not a function 

Answer 1

Webpack loades यह तुल्यकालिक लेकिन प्रत्येक फ़ाइल का अपना गुंजाइश है।

क्यों अपने बयान में

import * as d3 from 'd3'; \\I'm using d3 v4 here. 
require('/resources/d3-hexbin.min.js') 

अपने दूसरे d3 चर नहीं मिल रहा है है कि।

आप ProvidePlugin का उपयोग करके इसे हल कर सकते हैं:

plugins: [ 
    new webpack.ProvidePlugin({ 
    d3: 'd3' 
    }), 
    ... //other plugins 

webpack.config.js इस तरह d3 आवेदन भर में उपलब्ध हो जाएगा।

इसे प्राप्त करने के वैकल्पिक रास्ता निम्न का उपयोग करने के लिए है:

import * as d3 from 'd3'; 
window.d3 = d3; 
require('./d3.hexbin.v0.min.js') 

आशा है कि यह आप में मदद करता है!