如何在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正常工作;）
   
   希望这可以帮助。