Próbuję załadować angular-ui-router w Webpack jako zewnętrzną zależność. Nazwa modułu to „angular-ui-router”. Oto przykład:
module.exports = webpackMerge(commonConfig, {
...
externals: {
"angular": true,
"angular-ui-router": true
},
...
});
Problem polega na tym, że Webpack tworzy w moim pliku app.bundle.js moduł, który wygląda następująco:
/***/ },
/* 1 */
/***/ function(module, exports) {
module.exports = angular;
/***/ },
/* 2 */
/***/ function(module, exports) {
module.exports = angular-ui-router;
/***/ }
/******/ ]);
Gdy przeglądarka próbuje załadować moduł, ocenia module.exports = angular-ui-router
jako wyrażenie zgłaszające następujący błąd:
Uncaught ReferenceError: ui is not defined
Jedyną poprawką, którą znalazłem dla tego problemu, jest:
module.exports = webpackMerge(commonConfig, {
...
externals: {
"angular": true,
"angular-ui-router": "window["angular-ui-router"]"
},
...
});
To daje poprawny wynik.
Czy istnieje lepszy sposób?
Odpowiedzi:
-1 dla odpowiedzi nr 1Jeśli masz nazwę modułu zewnętrznego z łącznikiem, użyj LibraryTarget as umd w sekcji wyników. Więc miałby kod app.bundle
require("angular-ui-router") would be used for requireJS and
root.angularUIRouter = factory(root["angular-ui-router"]) would be used for global variable type.
Kod pakietu wyglądałby następująco:
"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"])