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

Question

我是Webpack的新手并将其用于Angular2项目（https://angularclass.github.io/angular2-webpack-starter/）。

我很难在npm install之后让jQuery和Semantic-ui工作（.css和.js）。我认为这有点问题，因为这两个库都没有采用任何模块格式，并且不能简单地require(...)编辑或import编辑

我是否需要像往常一样简单地将它们包含在index.html中，或者是否有＃＆＃39; Webpack方式＆＃39;这样做？

Answer 1

请按照以下步骤操作：

1. 使用npm安装Semantic-UI：npm install semantic-ui --save
   并在安装过程中按照说明进行操作。
   我在src/assets下安装了它。

2. ＆＃34;生成＆＃34;在其目录中使用gulp build的语义。
   这将在/semantic下创建另一个名为dist的目录，或者在安装过程中设置为输出目录的任何名称。
   

3. 现在我们必须告诉Webpack加载Semantic的.js和.css文件（新创建的/semantic/dist/目录中的文件）。
   我使用angular-cli生成了我的项目，并将我的配置放在名为angular-cli.json的文件的根目录中。
   它看起来像这样：
   https://gist.github.com/olegkorol/d77951e3ba3a5ff2c798e96c807c1a02
   寻找＆＃34;样式＆＃34;和＆＃34;脚本＆＃34;在JSON中分别添加Semantic的缩小.css和.js：
   "assets/semantic/dist/semantic.min.css"
   和
   "assets/semantic/dist/semantic.min.js"

4. 正如您在问题中所述，Semantic-UI需要jQuery才能工作。
   我们只需将脚本添加到＆lt; .head＆gt; of index.html（在/src目录中）：
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

5. 再次构建或提供您的应用，您应该让Semantic-UI正常工作;）
   
   希望这会有所帮助。