Come utilizzare semantic-ui per reagire con il webpack?

Question

Vorrei usare CommonJS per includere semantic-ui nel mio file jsx di risposta. Ho installato semantic-ui con bower e il webpack è configurato correttamente per includere la directory bower_components.

Tuttavia, quando uso require('semantic-ui/dist/semantic-ui.js') nel file JSX, la console di lanciare sempre un errore "ReferenceError Uncaught: jQuery non è definito", anche quando ho messo una dichiarazione var jQuery = require('jquery/dist/jquery.js') prima.

Un'altra cosa correlata è che, per far funzionare semantic-ui, è necessario includere anche semantic.css. Mi sto anche chiedendo come includere semantic.css nel file jsx.

Answer 1

Per quanto riguarda il file CSS, è necessario caricarlo nel file index/whatever.html prima di procurarsi il proprio JS.

tentare di risolverli prima si richiede semantico-ui:

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

non al 100% sicuro che questo funzionerà ma vale la pena di provare.

Le cose possono essere complicate con i moduli CommonJS. Inoltre, potrebbe valere la pena esaminare React + Browserify. Rende super semplice l'importazione dei moduli NPM usando require.

Answer 2

provare il provide-plugin in questo modo:

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