将语义ui导入反应组件

Question

我已经通过npm安装了语义ui。它目前在node_modules之内，并被构建到/ dist /中。看起来像这样：

"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" 
    } 

和文件结构看起来像...

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

在我的反应成分app.jsx，我导入反应过来，反应过来-DOM，jQuery的，但它似乎有语义上的问题-i-

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'; 

为什么这个导入有问题？我怎样才能将语义使用CSS/JS带入我的项目？

Answer 1

如果要导入只副作用整个模块，而无需输入任何绑定，然后写：

import 'semantic-ui';

否则，你需要将其命名为：

import * as semantic from 'semantic-ui';

尽管它可能具有默认导出，因此您可以只写：

import semantic from 'semantic-ui';

编辑：尽管对于语义UI，导入过程似乎与您预期的有点不同。看看this discussion。

Answer 2

使用semantic-ui-css不应该给任何地方带来太多的痛苦，因为它并不意味着被黑客攻击（定制）。然而，简单地安装semantic-ui不会为您提供“东西”，而是要求您配置webpack，或者任何定制的css框架，包括 - 一次配置组件并导入它。

main.js中（或者其它任何反应过来被实例化）NPM之后安装语义-UI-CSS：

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