怎么引用没有.d.ts声明文件的js库

JavaScript013

怎么引用没有.d.ts声明文件的js库,第1张

通常，在项目中引用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"],然后就可以使用$语法了

通过script标签的src属性可以引用一些js库

一般引用的位置是body结束之前，业务逻辑（用到js库）之前，这样才能保证使用时js库已经执行

否则容易报错

js文件放在src/main/webapp目录下， 之后在页面上正常引用就行。

举例：jquery.js在 src/main/webapp/jquery目录下， 页面上引用

<script type="text/javascript" src="jquery/jquery.js"></script>