typescript - Angular 4.X版本如何引入第三方JS的库

问题描述

问 题

本人最近在做一个项目，使用Angular 4.X版本，需要使用到很多第三方JS写的库，比如说JQuery，DataTables，Date Range Picker，ECharts，js-sha256，安装使用它们的方法很多，比如js-sha256，我是直接通过npm install 安装后直接在component中 import { sha256 } from 'js-sha256'，然后就可以使用了。而Echarts，我是通过typings安装使用。Bootstrap我是下载包放在assets中，直接在html中使用。三种方法都不一样。

我想知道有没有比较通用的使用第三方js库的方法。希望可以给出步骤，谢谢。

解决方案

这要看你的第三方库放在哪。

第一种情况：
如果是用npm安装在node_modules下，可以直接用类似的：import * as $ from "jquery";
导入语句具体采用哪种语法要看你的某个.d.ts文件中有没有定义过此模块的导出时什么样的。如果没有对应的.d.ts文件，就看看实际模块的代码中是如何导出的接口的。此种方法不用在意模块使用ts还是js编写的,.d.ts文件也不是必须的。

第二种情况：
只是想通过路径引用一个.js文件，那么你需要在tsconfig.json中的compilerOptions中配置"allowJs": true。然后代码中直接import那个文件，比如：import * as Swiper from './utils/swiper/swiper.min.js';,具体的引用语法看那个模是怎么导出的了。.d.ts文件也不是必须的。

注意.d.ts不是必须....

这篇关于typescript - Angular 4.X版本如何引入第三方JS的库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！