Tên gói web bên ngoài tên gói có dấu gạch ngang

Question

Tôi đang cố gắng tải angular-ui-router trong Webpack dưới dạng phụ thuộc bên ngoài. Tên mô-đun là "angular-ui-router". Dưới đây là một ví dụ:

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

Vấn đề với điều này là Webpack tạo ra một mô-đun trong app.bundle.js của tôi trông giống như sau:

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

    module.exports = angular; 

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

    module.exports = angular-ui-router; 

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

Khi trình duyệt cố gắng nạp module, nó đánh giá module.exports = angular-ui-router như là một biểu, ném các lỗi sau:

Uncaught ReferenceError: ui is not defined

việc sửa chữa duy nhất tôi đã tìm thấy cho vấn đề này là:

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

Điều này mang lại kết quả chính xác.

Có cách nào tốt hơn không?

Answer 1

Khi bạn có tên mô-đun bên ngoài có dấu gạch ngang, hãy sử dụng thư viện Mục tiêu là umd trong phần đầu ra. Vì vậy, các mã app.bundle sẽ phải

require("angular-ui-router") would be used for requireJS and 
root.angularUIRouter = factory(root["angular-ui-router"]) would be used for global variable type. 

đang Bundle sẽ trông như thế này:

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