module.exports "Module không được định nghĩa"

Question

Vì vậy, tôi đang sử dụng RequireJS và phản ứng, cố gắng để tải một thành phần của bên thứ ba, mà đã được cài đặt với:

npm install react-autocomplete 

Cấu trúc là ở đây: https://github.com/rackt/react-autocomplete/tree/master/lib

Bây giờ, tôi có một tập tin main.js, bắt đầu khi requireJS được nạp, trông như thế này:

require.config({ 
paths: { 
     "react" : "react/react", 
     "jsx-transformer" : "react/JSXTransformer", 
     "react-autocomplete" : "node_modules/react-autocomplete/lib/main" 
    } 
}); 

require(["react"], function(react) { 
    console.log("React loaded OK."); 
}); 

require(["jsx-transformer"], function(jsx) { 
    console.log("JSX transformer loaded OK."); 
}); 

require(['react-autocomplete'], function (Autocomplete) { 
    console.log("React autocomplete component loaded OK."); 
    var Combobox = Autocomplete.Combobox; 
    var ComboboxOption = Autocomplete.Option; 
    console.log("Autocomplete initiated OK"); 
}); 

Bây giờ, tất cả tải OK, nhưng thứ ba yêu cầu tuyên bố ném một "mô-đun không phải là định nghĩa", cho các tập tin main.js trong thành phần của bên thứ ba, trông như thế này:

module.exports = { 
    Combobox: require('./combobox'), 
    Option: require('./option') 
}; 

Tôi đã đọc về điều này đã làm với tôi cố gắng để yêu cầu một module CommonJS-phong cách, nhưng tôi không thể tìm ra cách tự sửa nó, vì tôi mới làm điều này.

Có ai có ví dụ rõ ràng về cách tôi có thể giải quyết vấn đề này không?

Answer 1

RequireJS không thể tải các mô-đun CommonJS như hiện trạng. Tuy nhiên, có một sửa đổi tối thiểu bạn có thể thực hiện cho họ để tải chúng. Bạn cần phải bọc chúng trong một cuộc gọi define như thế này:

define(function (require, exports, module) { 

    module.exports = { 
    Combobox: require('./combobox'), 
    Option: require('./option') 
    }; 

}); 

Nếu bạn có một loạt các module bạn cần phải chuyển đổi, hoặc nếu bạn đang sử dụng một thư viện của bên thứ ba viết bằng mô hình CommonJS và muốn chuyển đổi nó là một phần của quá trình xây dựng, bạn có thể sử dụng r.js để thực hiện chuyển đổi cho bạn.

Answer 2

Vấn đề là requireJS không hỗ trợ các mô-đun CommonJS chỉ AMD. Vì vậy, nếu thư viện của bên thứ ba không hỗ trợ AMD thì bạn sẽ phải nhảy qua một số vòng để làm cho nó hoạt động.

Nếu bạn có tùy chọn, tôi sẽ đề xuất sử dụng browserify hoặc webpack để tải mô-đun vì đó là các công cụ mà phần lớn cộng đồng phản hồi đã chọn và thực tế tất cả các thành phần phản ứng của bên thứ ba được xuất bản trên npm như mô-đun CommonJS.