基于Webpack打包的Angular4项目中引入jQuery

在Angular的开发过程中可能会用到jQuery。有时候不直接使用，使用的第三方框架可能也会用到。因此，我在这里总结了一下我在Angular2-4项目中是如何引入jQuery的。

1.安装jQuery

首先在jQuery官网找到适合自己的按照方式，我这里直接用NPM的方式安装：
npm install jquery --save
加入--save是将jQuery写入当前项目的package.json中

2.配置webpack.config.js

在webpack.config.js的config.plugins下加入：

config.plugins = [
  //省略掉了其他配置
    new webpack.ProvidePlugin({
      $: "jquery",
      jquery: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ];

3.声明与使用

使用webpack的话需要在vendor.ts文件中import jQuery：
import 'jquery/dist/jquery.js'

我引用的semantic-ui 需要使用jQuery对象，例如创建一个search对象需要：
$('xxxx').search(xxx)

在Angular2~4的Component中不能直接使用jQuery的$符号，因此我们在Component文件的顶部引入$:
declare var $: any;

然后就可以正常使用jQuery了，例如：

  ngOnInit() {
    $(this.brandInput.nativeElement).search({
      apiSettings: {
        url: '/api/brand/name?q={query}'
      },
      fields: {
        results : 'results',
        title   : 'title',
      },
      searchDelay:300
    })
  }

我在ngOnInit方法中获得Angular的页面元素brandInput的nativeElement，
相当于一个选择器，就是获得页面上的元素，然后用$符号成功将其转换成一个jQuery对象。

参考

how to use jQuery with Angular2?
[Question] jQuery inclusion for Bootstrap