将语义 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中，我正在导入react、react-dom、jquery，但它似乎与semantic-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

使用语义-ui-css 不应带来任何痛苦，因为它不应该被黑客入侵（自定义）。而简单地安装 semantic-ui 不会为您提供“东西”，而是需要您配置 webpack，或者任何自定义 css 框架涉及 - 一次配置组件并导入它。

在 npm install semantic-ui-css 之后的 main.js 内（或任何反应实例化的地方）：

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