将语义 ui 导入反应组件

Question

我已经通过 npm 安装了语义 ui。它目前在 node_modules 中并且被 built 到 /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

在我的 React 组件 app.jsx 中，我正在导入 react，react-dom，jquery，但它似乎有语义问题-ui-

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

为什么这个导入有问题？如何将语义-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 不会为您提供 "stuff" 而是 requi 您配置 webpack 的环，或者任何自定义 css 框架涉及的 - 一次配置组件并导入它。

在 npm install semantic-ui-css:

后 main.js 内 main.js（或实例化 React 的地方）

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

将语义 ui 导入反应组件

Importing semantic ui into a react component

javascript

reactjs

semantic-ui