Angulr2+ 引入第三方库 以及 Angular中Markdown-It 在ie11下的兼容问题

本文介绍了在Angular项目中引入第三方库如Markdown-It的正确方法,强调了如何为非TypeScript库添加类型声明以获得代码提示。同时,针对Angular应用在IE11下遇到的箭头函数兼容性问题,提出了具体的解决策略,包括直接引入未经过TypeScript处理的库文件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Angular 第三方库标准引入方式

markdown-it为例

下载依赖包

npm install --save markdown-it @types/makdown-it
@types

TS作为JS的超集自然可以使用用JS编写的各种库, 但是直接使用JS库那么TS一大优势: 强类型语言带来的代码智能提示这个功能就无法使用了。所以就出现了@Types这个项目。
@types将非TS编写的第三方js库包装成TS可用的库, 就是在原JS库上加上了一些*.d.ts的声明文件, 声明了JS库中用到的类型.
这样一来TS就可以通过声明文件识别JS库, 以提供TS特有的各种功能了.
@types项目
@types项目搜索页 – 搜索提供了定义文件的JS库

IE11兼容问题(仅markdown-it)

在使用markdown-it的时候, 我按照上面的方式引入了markdown-it@types/markdown-it, 将项目启动后在Chrome下可以运行,
但是在IE11下, 控制台出现以下报错

SCRIPT1002: 语法错误
vendor.js (75078,27)

打开vendor.js, 具体信息如下

/**
 * Creates a string based on an array of numeric code points.
 * @see `punycode.ucs2.decode`
 * @memberOf punycode.ucs2
 * @name encode
 * @param {Array} codePoints The array of numeric code points.
 * @returns {String} The new Unicode string (UCS-2).
 */
const ucs2encode = array => String.fromCodePoint(...array);

应该是IE11不支持箭头函数, 加上babel-polyfill依然还是同样的错误.
markdown-it的Demo页在IE下是可以运行的, 问题不知道是Angular还是TS打包的问题, 导致漏过了上面的一行代码.

总之最后的解决方法是直接引入了markdown-it.min.js不通过TS.以下是引入方法.

Angular 无声明文件第三方库引入方式

还是以markdown-it为例
引入方式 (这种方式引入的JS库无法进行智能提示)

import * as MarkdownIt from 'node_modules/markdown-it/dist/markdown-it.min.js';
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值