Jak korzystać z semantic-ui w reakcji na WebPacka?

Question

Chciałbym użyć CommonJS do włączenia semantic-ui w moim pliku JSX reagowania. Zainstalowałem semantic-ui z altanką, a pakiet Webpack jest poprawnie skonfigurowany tak, aby zawierał katalog bower_components.

Jednak kiedy używam require('semantic-ui/dist/semantic-ui.js') w pliku JSX, konsola zawsze wygeneruje błąd „Uncaught ReferenceError: jQuery nie jest zdefiniowana”, nawet kiedy kładę oświadczenie var jQuery = require('jquery/dist/jquery.js') wcześniej.

Inną powiązaną rzeczą jest to, że aby semantic-ui działało, należy również włączyć semantic.css. Zastanawiam się również, jak dołączyć semantic.css do pliku jsx.

Answer 1

Co do CSS, będziesz chciał załadować to w swoim pliku index/whatever.html przed sourcingiem swojego JS.

spróbuj wykonać następujące czynności przed wymagają semantycznej-ui:

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

Nie 100% pewien, że to będzie działać, ale warto spróbować.

Rzeczy mogą być kłopotliwe dzięki modułom CommonJS. Warto też zajrzeć do React + Browserify. Sprawia, że ​​importowanie modułów NPM przy użyciu require jest bardzo proste.

Answer 2

spróbować provide-plugin tak:

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