nhập khẩu tròn với webpack trở rỗng đối tượng

Question

Hitting vấn đề này chính xác hiện:

FileA: 
var b = require file B 
var c = require file C 

FileB: 
var a = require file A 

FileC: 
var a = require file A 

Khi tôi chạy mã, tôi nhận được một lỗi trong tập tin C:

A.doSomething is not a function 

Ném một trình gỡ lỗi trong đó và thấy rằng A là một vật thể rỗng. thực sự là gì lạ là tôi chỉ gặp lỗi trong Tệp C, chứ không phải tệp B. Siêu nhầm lẫn ở đây.

Answer 1

Đây không phải là vấn đề về webpack mà là tài sản của mô-đun CommonJS.

Khi mô-đun CommonJS được yêu cầu đầu tiên, thuộc tính exports được khởi tạo thành một đối tượng trống phía sau hậu trường.

module.exports = {}; 

Sau đó, mô-đun có thể quyết định mở rộng thuộc tính exports này hoặc ghi đè lên.

exports.namedExport = function() { /* ... */ }; // extends 

module.exports = { namedExport: function() { /* ... */ } }; // overrides 

Vì vậy, khi A đòi hỏi B và B đòi hỏi A ngay sau đó, A không được thực hiện một lần nữa (mà sẽ tạo ra một vòng lặp vô hạn), nhưng exports tài sản hiện tại của nó được trả về. Vì A yêu cầu B ở đầu tệp, trước khi xuất bất kỳ thứ gì, cuộc gọi require('A') trong mô-đun B sẽ mang lại đối tượng trống.

Sửa lỗi chung cho phụ thuộc vòng là đặt hàng nhập của bạn ở cuối tệp, sau bạn đã xuất các biến cần thiết bởi các mô-đun khác.

A:

module.exports = { foo: 'bar' }; 
require('B'); // at this point A.exports is not empty anymore 

B:

var A = require('A'); 
A.foo === 'bar';