[已解决]angular4 怎么引用没有.d.ts声明文件的js库

通常,在项目中引用js库分两种情况:

一种是通过npm install ${name} --save 安装在node_modules目录下,package.json中的dependencies会配置正式环境所依赖的库。

另外一种就是直接将.js文件放在src目录下,通过相对路径的方式直接引用。



对于第一种情况:

例如:weixin-js-sdk,在项目路径下,cnpm install weixin-js-sdk --save, 安装成功以后,查看package.json下的dependencies会增加一行weixin-js-sdk的版本信息。在使用的时候导入 import * as WeiXin from 'weixin-js-sdk'; 

对于第二种情况:

通过相对路径引用一个.js文件,那么需要在tsconfig.json中的compilerOptions中配置"allowJs": true,然后在使用的时候直接import,例如:import * as Swiper from './lib/swiper/swiper.min.js'; 



上面两种情况是在没有.d.ts声明文件的情况下

对于有些三方库,例如bootstrap,jquery等许多常用的都有声明文件,直接导入就可以,例如jquery:

 1. cnpm install jquery --save  安装jquery依赖包到node_modules目录下

2. npm install @types/jquery --save-dev  安装类型描述文件到node_modules目录下,只安装到开发环境

3. 修改angular-cli.json文件,增加styles(引入css的路径)和scripts(引入js的路径)   "scripts": ["../node_modules/jquery/dist/jquery.js"]

4. 修改tsconfig.app.json文件,添加到types数组 "types": ["jquery"],然后就可以使用$语法了





  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值