Angular CLI 集成jQuery
Angular CLI有两种方式集成jQuery:以全局方式导入和以模块方式导入。
安装
在导入jQuery之前需要先安装:
npm install jquery --save
npm install @types/jquery --save
全局方式
在.angular-cli.json的app.scripts引入jquery
"scripts": [
"../node_modules/jquery/dist/jquery.min.js"
],
模块方式
模块方式主要体现在使用import来导入jquery
import * as $ from 'jquery';
插件
在引入jquery插件,需要确认插件有没有对应的types.d.ts文件,如果没有,则可以在src/types.d.ts定义插件的TypeScript类型。
类似于:
interface JQuery {
myPlugin(options?: any): any;
}
如果插件没有对应的types,则会报以下类似的错误:
[TS][Error] Property 'myPlugin' does not exist on type 'JQuery'
注意:在一个项目里建议不要两种方式同时使用,这样会导致打包时会打包两份jquery。