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

Question

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

我很难让jQuery和Semantic-ui在npm install之后工作（包括.css和.js）。我想这是有点问题，因为这两个库都没有任何的模块格式，不能简单地将require(...)版或import版

我需要简单地将它们包括在index.html正常，还是有一个“的WebPack办法”去做这个 ？

Answer 1

遵循以下步骤：

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

2. 在其目录中使用gulp build“构建”语义。
   这将在/semantic下创建另一个目录，称为dist或在安装过程中设置为输出目录的任何名称。现在
   

3. 我们将不得不告诉的WebPack加载语义的的.js和.css文件（那些在新创建的/semantic/dist/目录）。
   我使用angular-cli生成了我的项目，并将我的配置保存在名为angular-cli.json的文件的根目录中。
   它看起来像这样：
   https://gist.github.com/olegkorol/d77951e3ba3a5ff2c798e96c807c1a02
   寻找在JSON “风格” 和 “脚本”，并添加语义的缩小的.css和分别.js文件：
   "assets/semantic/dist/semantic.min.css"
   和
   "assets/semantic/dist/semantic.min.js"

4. 由于你已经在你的问题中说过，Semantic-UI需要jQuery才能工作。
   我们刚才添加的脚本。头>的index.html的<（在/src目录）：
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

5. 编译或再次为您的应用程序，你应该有语义的UI正常工作;）
   
   希望这有助于。