如何使用semantic-ui與webpack作出反應？

我想用CommonJS在我的反應jsx文件中包含semantic-ui。我使用bower安裝了semantic-ui，並且webpack已正確配置爲包含bower_components目錄。如何使用semantic-ui與webpack作出反應？

然而，當我使用的JSX文件 require('semantic-ui/dist/semantic-ui.js')，控制檯總是拋出一個錯誤「未捕獲的ReferenceError：jQuery是沒有定義」，甚至當我把一個聲明var jQuery = require('jquery/dist/jquery.js')之前。

另一個相關的事情是，爲了使語義UI工作，semantic.css也應該包括在內。我也想知道如何在jsx文件中包含semantic.css。

來源

2015-05-12 Yu Wu

至於CSS，你會想要在你的JS之前加載你的索引/ 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模塊非常簡單。

來源

2015-05-12 01:17:16 iamjpg

嘗試provide-plugin像這樣：

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

來源

2015-11-19 16:32:13

這是正確的答案。 – elaich

如何使用ProvidePlugin加載語義？ – Webman

接受的答案有效，但這是正確的，最佳實踐答案 –

如何使用semantic-ui與webpack作出反應？

回答

相關問題