/ / Nazwa modułu zewnętrznego Webpacka z łącznikiem - javascript, angular-ui-router, webpack

Nazwa modułu zewnętrznego externa z łącznikiem - javascript, angular-ui-router, webpack

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 1

Jeś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"])