脚本宝典收集整理的这篇文章主要介绍了Angular4引入第三方库,以jQuery为例,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_360_2@如果我们想在Angular中使用第三方的库,比如jquery或bootstrap等,该如果做呢?
首先我们先来看看package.json,这个文件列出了项目所使用的第三方依赖包。我们在创建新项目的时候默认会给我们下载一些包,这些是Angular自带的,存放在node_modules目录中。
dePEndencies和devDependencies。
devDependencies 里面的插件只用于开发环境,不用于生产环境,而 dependencies 是需要发布到生产环境的。
Angular引入jQuery
如果我们想使用jquery的话,我们就需要将jquery包下载到node_modules中,然后引入js文件即可。
命令: npm install name --save / --save--dev
我们可以通过npm install name –save这个命令去添加依赖。注意,要在项目的根目录下执行该命令。
npm install jquery --save
--save与--save-dev的区别
–-save 就是将要安装的依赖写到package.json的dependencies 对象中去
–-save-dev是将要安装的依赖写到package.json的devDependencies 对象中去
可以看到,一开始dependencies中是没有jquery的,通过 npm install jquery --save命令会自动下载jquery并添加到dependencies中。然后我们会发现node_modules目录中就有jquery的包了。
修改angular-cli.json文件
- styles中就是我们要引入的css
- scripts中就是我们要引入的js
下载的jQuery包是放在node_modules目录中的,通过设置scripts的值为jQuery包的路径来引入它;
"scripts": ["../node_modules/jquery/dist/jquery.js"]
安装类型描述文件
Angular以TypeScript语言作为默认编码语言,而jquery本质是javascript,TypeScript是不能直接使用的。
完成上面的步骤后,这时我们还不能直接使用jquery,还需要先安装类型描述文件,让TypeScript认识jquery。
命令:npm install @types/name --save / --save-dev
npm install @types/jquery --save-dev
npm config set registry https://registry.npm.taobao.org
以上是脚本宝典为你收集整理的Angular4引入第三方库,以jQuery为例全部内容,希望文章能够帮你解决Angular4引入第三方库,以jQuery为例所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。