वेबपैक बाहरी मॉड्यूल नाम हाइफ़न

Question

के साथ मैं वेबपैक में कोणीय-यूई-राउटर को बाहरी निर्भरता के रूप में लोड करने का प्रयास कर रहा हूं। मॉड्यूल नाम "कोणीय-यूई-राउटर" है। यहाँ एक उदाहरण है:

module.exports = webpackMerge(commonConfig, { 
    ... 
    externals: { 
     'angular': true, 
     'angular-ui-router': true 
    }, 
    ... 
}); 

इस के साथ समस्या यह है कि Webpack मेरी app.bundle.js में एक मॉड्यूल बनाता है कि ऐसा दिखाई देता है:

/***/ }, 
/* 1 */ 
/***/ function(module, exports) { 

    module.exports = angular; 

/***/ }, 
/* 2 */ 
/***/ function(module, exports) { 

    module.exports = angular-ui-router; 

/***/ } 
/******/ ]); 

ब्राउज़र मॉड्यूल लोड करने के लिए कोशिश करता है, यह अभिव्यक्ति के रूप में module.exports = angular-ui-router का मूल्यांकन करता है, तो निम्न त्रुटि फेंक:

Uncaught ReferenceError: ui is not defined

केवल ठीक मैं इस समस्या के लिए मिल गया है है:

module.exports = webpackMerge(commonConfig, { 
    ... 
    externals: { 
     'angular': true, 
     'angular-ui-router': 'window["angular-ui-router"]' 
    }, 
    ... 
}); 

यह सही परिणाम प्राप्त करता है।

क्या कोई बेहतर तरीका है?

Answer 1

जब आपके पास हाइफ़न के साथ बाहरी मॉड्यूल नाम है, तो आउटपुट अनुभाग में लाइब्रेरी लक्ष्य को umd के रूप में उपयोग करें। वास्तव में

"object" == typeof exports && "object" == typeof module ? 
module.exports = factory(require("angular-ui-router")) : "function" == 
typeof define && define.amd ? define(["angular-ui-router"], factory) : 
"object" == typeof exports ? exports.temp = factory(require("angular-ui- 
router")) : root.temp = factory(root["angular-ui-router"])