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

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

但是，当我在jsx文件中使用require('semantic-ui/dist/semantic-ui.js')时，控制台总是会抛出一个错误“Uncaught ReferenceError：jQuery is not defined”，即使我放了一个语句var jQuery = require('jquery/dist/jquery.js') 。

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

Answer 1

对于CSS，您需要在获取JS之前在index / whatever.html文件中加载它。

在需要语义ui之前，请尝试以下操作：

 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。 使用require导入NPM模块非常简单。

Answer 2

尝试像这样的提供插件 ：

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