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

Question

我是Webpack的新手,并将它用于Angular2项目(https://angularclass.github.io/angular2-webpack-starter/).

我很难让jQuery和Semantic-ui工作(包括.css和.js)npm install.我认为这有点问题,因为这两个库都没有任何模块格式,也不能简单地require(...)编辑或import编辑

我是否需要将它们简单地包含在index.html正常情况下,或者是否有"Webpack方式"来执行此操作？

Answer 1

按着这些次序：

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

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

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（/src目录中）的 <.head> 中：
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

5. 再次构建或服务您的应用程序，您应该让 Semantic-UI 正常工作；）
   
   希望这会有所帮助。