如何在Webpack Angular 2中包含jQuery和Semantic-ui

Question

我是Webpack的新手，並將其用於Angular2項目（ https://angularclass.github.io/angular2-webpack-starter/ ）。

在npm install jQuery和Semantic-ui（.css和.js）后，我很難工作。 我想這有點問題，因為這兩個庫都不是任何模塊格式，不能簡單地被require(...) ed或import ed

我是否需要像往常一樣簡單地將它們包括在index.html中，或者是否有“ Webpack方法”來做到這一點？

Answer 1

跟着這些步驟：

1. 使用npm安裝Semantic-UI： npm install semantic-ui --save
   並在安裝過程中按照說明進行操作。
   我將其安裝在src/assets 。

2. 在其目錄內使用gulp build來“構建”語義。
   這將在/semantic下創建另一個名為dist目錄，或在安裝過程中設置為輸出目錄的任何名稱。
   

3. 現在，我們將不得不告訴Webpack加載Semantic的.js和.css文件（在新創建的/semantic/dist/目錄中的文件）。
   我使用angular-cli生成了我的項目，並將配置保存在根目錄中的名為angular-cli.json的文件中。
   看起來像這樣：
   https://gist.github.com/olegkorol/d77951e3ba3a5ff2c798e96c807c1a02
   在JSON中查找“樣式”和“腳本”，然后分別添加Semantic的縮小的.css和.js：
   "assets/semantic/dist/semantic.min.css"
   和
   "assets/semantic/dist/semantic.min.js"

4. 正如您在問題中已經提到的那樣，Semantic-UI需要jQuery才能正常工作。
   我們將腳本添加到index.html的<.head>（在/src目錄中）：
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

5. 再次構建或服務您的應用，您應該讓Semantic-UI正常工作;）
   
   希望這可以幫助。