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

发布时间：2020-12-17 06:58:02 所属栏目：安全来源：网络整理

导读：我是Webpack的新手,并将其用于Angular2项目( https://angularclass.github.io/angular2-webpack-starter/). 在安装它之后,我很难让jQuery和Semantic-ui工作(.css和.js).我认为这有点问题,因为这两个库都不是任何模块格式,并且不能简单地被要求(…)编辑或导入

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

在安装它之后,我很难让jQuery和Semantic-ui工作(.css和.js).我认为这有点问题,因为这两个库都不是任何模块格式,并且不能简单地被要求(…)编辑或导入

我是否需要像往常一样将它们简单地包含在index.html中,或者是否有“Webpack方式”来执行此操作？

解决方法

跟着这些步骤：

>使用npm安装Semantic-UI：npm install semantic-ui –save
并在安装过程中按照说明进行操作.
我在src / assets下安装了它.
>使用gulp build在其目录中“构建”语义.
这将在/ semantic下创建另一个名为dist的目录,或者在安装过程中设置为输出目录的任何名称.
>现在我们必须告诉Webpack加载Semantic的.js和.css文件(新创建的/ semantic / dist /目录中的文件).
我使用angular-cliand生成了我的项目,我的配置在一个名为angular-cli.json的文件的根目录中.
它看起来像这样：
https://gist.github.com/olegkorol/d77951e3ba3a5ff2c798e96c807c1a02
在JSON中查找“styles”和“scripts”,并分别添加Semantic的缩小.css和.js：
“资产/语义/距离/ semantic.min.css”
和
“资产/语义/距离/ semantic.min.js”
>正如您在问题中所述,Semantic-UI需要jQuery才能工作.我们只需将脚本添加到< .head> of index.html(在/ src目录中)：
< script src =“https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js”>< / script>
>再次构建或提供您的应用程序,您应该让Semantic-UI正常工作;)

希望这可以帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!