[英]How to use semantic-ui in react with webpack?
I would like to use CommonJS to include semantic-ui in my react jsx file. 我想使用CommonJS在我的react jsx文件中包含semantic-ui。 I installed semantic-ui with bower, and webpack is correctly configured to include the bower_components directory.
我在bower上安装了semantic-ui,并且正确配置了webpack以包含bower_components目录。
However, when I use require('semantic-ui/dist/semantic-ui.js')
in the jsx file, the console always throw an error "Uncaught ReferenceError: jQuery is not defined", even when I put a statement var jQuery = require('jquery/dist/jquery.js')
before that. 但是,当我在jsx文件中使用
require('semantic-ui/dist/semantic-ui.js')
时,控制台总是抛出一个错误“Uncaught ReferenceError:jQuery is not defined”,即使我把一个语句var jQuery = require('jquery/dist/jquery.js')
。
Another related thing is that in order for semantic-ui to work, semantic.css should also be included. 另一个相关的事情是,为了使语义ui工作,还应该包括semantic.css。 I am also wondering how to include semantic.css in jsx file.
我也想知道如何在jsx文件中包含semantic.css。
try the provide-plugin like so: 尝试像这样的提供插件 :
plugins: [
new ProvidePlugin({
'jQuery': 'jquery'
})
],
As for the CSS you're going to want to load that in your index/whatever.html file before sourcing your JS. 对于CSS,您需要在获取JS之前在index / whatever.html文件中加载它。
Try the following before you require semantic-ui: 在需要语义ui之前,请尝试以下操作:
var $ = jQuery = require('jquery/dist/jquery.js');
window.jQuery = $; // Assure it's available globally.
var s = require('semantic-ui/dist/semantic-ui.js');
Not 100% sure this will work but it's worth a try. 不是100%肯定这会起作用,但值得一试。
Things can get tricky with CommonJS modules. 使用CommonJS模块可能会变得棘手。 Also, might be worth looking into React+Browserify.
此外,可能值得研究React + Browserify。 Makes it super simple to import NPM modules using
require
. 使用
require
导入NPM模块非常简单。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.