Làm thế nào để sử dụng ngữ nghĩa-ui trong phản ứng với webpack?

Question

Tôi muốn sử dụng CommonJS để bao gồm ngữ nghĩa-ui trong tệp jsx phản ứng của tôi. Tôi đã cài đặt ngữ nghĩa-ui với bower, và webpack được cấu hình đúng để bao gồm thư mục bower_components.

Tuy nhiên, khi tôi sử dụng require('semantic-ui/dist/semantic-ui.js') trong file jsx, giao diện điều khiển luôn luôn ném ra một lỗi "của router ReferenceError: jQuery không được định nghĩa", ngay cả khi tôi đưa một tuyên bố var jQuery = require('jquery/dist/jquery.js') trước đó.

Một điều liên quan khác là để ngữ nghĩa-ui hoạt động, các tệp semantic.css cũng nên được bao gồm. Tôi cũng tự hỏi làm thế nào để bao gồm semantic.css trong tập tin jsx.

Answer 1

Đối với CSS bạn sẽ muốn tải nó trong tệp index/whatever.html của bạn trước khi tìm nguồn cung ứng JS của bạn.

Hãy thử những điều sau đây trước khi bạn đòi hỏi ngữ nghĩa-ui:

var $ = jQuery = require('jquery/dist/jquery.js'); 
window.jQuery = $; // Assure it's available globally. 
var s = require('semantic-ui/dist/semantic-ui.js'); 

Không phải 100% chắc chắn điều này sẽ làm việc nhưng nó có giá trị một thử.

Mọi thứ có thể trở nên phức tạp với các mô-đun CommonJS. Ngoài ra, có thể đáng xem xét trong React + Browserify. Giúp việc nhập mô-đun NPM trở nên cực kỳ đơn giản khi sử dụng require.

Answer 2

thử provide-plugin như vậy:

plugins: [ 
    new ProvidePlugin({ 
     'jQuery': 'jquery' 
    }) 
    ],