如何使用semantic-ui与webpack做出反应？

Question

我想使用CommonJS在我的react jsx文件中包含semantic-ui.我在bower上安装了semantic-ui,并且正确配置了webpack以包含bower_components目录.

但是,当我require('semantic-ui/dist/semantic-ui.js')在jsx文件中使用时 ,控制台总是会抛出一个错误"未捕获的ReferenceError:jQuery未定义",即使我var jQuery = require('jquery/dist/jquery.js')在此之前放了一个语句.

另一个相关的事情是,为了使语义ui工作,还应该包括semantic.css.我也想知道如何在jsx文件中包含semantic.css.

Answer 1

尝试像这样的提供插件:

  plugins: [
    new ProvidePlugin({
      'jQuery': 'jquery'
    })
  ],

Answer 2

至于 CSS，您需要在获取 JS 之前将其加载到您的 index/whatever.html 文件中。

在需要语义用户界面之前请尝试以下操作：

var $ = jQuery = require('jquery/dist/jquery.js');
window.jQuery = $; // Assure it's available globally.
var s = require('semantic-ui/dist/semantic-ui.js');

不能 100% 确定这会起作用，但值得一试。

CommonJS 模块的事情可能会变得棘手。另外，可能值得研究一下 React+Browserify。使得使用 导入 NPM 模块变得超级简单require。