lixmet
lixmet
发布于 2周前

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。