Importieren von Semantik-UI in eine Reaktionskomponente

Question

Ich habe Semantik-UI über Npm installiert. Es ist derzeit innerhalb node_modules und wurde in/dist/gebaut. Sieht aus wie so:

"devDependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.11.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "react": "^15.3.0", 
    "react-dom": "^15.3.0", 
    "react-hot-loader": "^1.3.0", 
    "webpack": "^1.13.1", 
    "webpack-bundle-tracker": "0.0.93", 
    "webpack-dev-server": "^1.14.1" 
    }, 
    "dependencies": { 
    "semantic-ui": "^2.2.2" 
    } 

und Struktur-Datei sieht aus wie ...

/node_modules/ 
     |- ... 
     |- semantic-ui 
       |- dist 
        |- components 
        |- themes 
        |- semantic.min.css 
        |- semantic.min.js 

In meiner reagieren Komponente app.jsx, ich bin den Import reagieren, reagieren-dom, jquery, aber es scheint ein Problem mit Semantik-

zu haben

import React, { PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 
import $ from 'jquery'; 
import * from 'semantic-ui'; 


ERROR in ./assets/js/app.jsx 
Module build failed: SyntaxError: /Users/maude/Projects/coffee/assets/js/app.jsx: Unexpected token (4:9) 
    2 | import ReactDOM from 'react-dom'; 
    3 | import $ from 'jquery'; 
> 4 | import * from 'semantic-ui'; 

Warum ist dieser Import ein Problem? Wie kann ich semantic-ui css/js in mein Projekt bringen?

Answer 1

Wenn Sie ein ganzes Modul für Nebenwirkungen nur importieren, ohne Bindungen zu importieren, dann schreiben:

import 'semantic-ui';

Andernfalls müssen Sie es nennen:

import * as semantic from 'semantic-ui';

Obwohl es wahrscheinlich einen Standard-Export hat, können Sie einfach schreiben:

import semantic from 'semantic-ui';

Bearbeiten: Obwohl für Semantic-Ui scheint der Importvorgang ein wenig anders als Sie vielleicht erwarten. Schauen Sie sich this discussion an.

Answer 2

Verwendung von semantic-ui-css sollte nicht annähernd so viel Schmerz geben, wie es nicht gehackt werden soll (angepasst). Während die einfache Installation von semantic-ui Sie nicht mit dem "Zeug" versorgen wird, sondern dass Sie webpack konfigurieren müssen, oder was auch immer Sie für das Anpassen von css-Framework benötigen - das Konfigurieren der Komponente zu einem Zeitpunkt und das Importieren derselben.

innerhalb main.js (oder wo auch immer react instanziiert wird) nach npm installieren semantisch-ui-CSS:

window.$ = window.jQuery = require('jquery') 
require('semantic-ui-css/semantic.css') 
require('semantic-ui-css/semantic.js')