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

Question

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

然而，当我使用 require('semantic-ui/dist/semantic-ui.js') 在 jsx 文件中，控制台总是抛出错误 "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 文件中。

在请求uire semantic-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

像这样尝试 provide-plugin：

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

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

How to use semantic-ui in react with webpack?

jquery

commonjs

reactjs

semantic-ui