javascript - 将语义 ui 导入到 React 组件中

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

在我的react组件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';

为什么这个导入会出现问题？如何将semantic-ui css/js 引入我的项目？

Answer 1

如果您只想导入整个模块以产生副作用，而不导入任何绑定(bind)，请编写:

导入'semantic-ui';

否则，您需要为其命名:

从“semantic-ui”导入 * 作为语义；

虽然它可能有默认导出，所以你可以写:

从“semantic-ui”导入语义；

编辑:尽管对于语义用户界面来说，导入过程的工作方式似乎与您的预期略有不同。看看this discussion .