वेबपैक बंडल

Question

से प्रतिक्रिया बहिष्कृत करें मैं वेबपैक द्वारा जेनरेट किए गए मेरे बंडल से प्रतिक्रिया को बाहर करने का प्रयास कर रहा हूं। कारण, हमारे पास पृष्ठ पर उपलब्ध प्रतिक्रिया का वैश्विक संस्करण है, इसलिए मैं इसका उपयोग करूँगा।

मैंने नीचे दिए गए उपयोग का प्रयास किया है, जैसा कि यहां बताया गया है Webpack and external libraries लेकिन यह काम नहीं कर रहा है। मैं देख सकता हूं कि वेबपैक ने प्रतिक्रिया निर्यात की है लेकिन यह अभी भी बंडल में दिखाई देता है।

externals: { 
    'react': 'React' 
} 

मैं सोच रहा था कि यह एक और निर्भरता हो सकता है उदा। प्रतिक्रिया-राउटर प्रतिक्रिया आयात? क्या कोई ऐसा करने में कामयाब रहा है?

Answer 1

आप अपने एप्लिकेशन बंडल से प्रतिक्रिया को अलग करने के लिए केवल कई प्रविष्टियां बना सकते हैं। उदाहरण के लिए आप वेबपैक CommonsChunkPlugin का उपयोग कर निम्न कार्य कर सकते हैं:

module.exports = { 
entry: { 
    "app": "your app entry file", 
    "react" : "react" 
}, 
plugins: [ 
    new webpack.optimize.CommonsChunkPlugin("react", "react.bundle.js") 
    ] 
} 

Answer 2

मुझे वही समस्या थी जैसा आपने किया था। एक रात के लिए अटक गया, जवाब मिला, react-domreact/lib/ReactDOM की आवश्यकता है, जिसमें अभी भी react बंडल में शामिल है। समाधान इस तरह दिखता है:

externals: { 
'react': 'react', // Case matters here 
'react-dom' : 'reactDOM' // Case matters here 
} 

फिर अपने पेज में स्क्रिप्ट टैग को react-dom जोड़ें।

Answer 3

webpack config:

externals: { 
    'react': 'React', 
    'react-dom': 'ReactDOM', 
    'react-router': 'ReactRouter' 
} 

index.html शरीर की तह तक इन जोड़ें।

<script src="http://cdn.bootcss.com/react/15.4.1/react.js"></script> 
<script src="http://cdn.bootcss.com/react/15.4.1/react-dom.js"></script> 
<script src="http://cdn.bootcss.com/react-router/2.8.1/ReactRouter.js"></script> 

और, अपने entry फ़ाइल में, हो सकता है index.js:

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var ReactRouter = require('react-router'); 

const App =() => { 
    return <div> 
     webpack externals 
    </div> 
}; 

ReactDOM.render(
    <App/>, 
    document.getElementById('container') 
);