Angularjs + Webpack 框架里，引入Bootstrap-datepicker插件时，datepicker is not a function错误的解决方法

Angularjs + Webpack 框架里，引入Bootstrap-datepicker插件时，浏览器提示datepicker is not a function错误的解决方法

问题描述：

使用Angularjs作为前端的框架，利用Webpack打包。在引入Bootstrap-datepicker这个框架的时候，Firebug提示“datepicker is not a function”错误。

引入Bootstrap-datepicker的代码如下：

import "./plugins/bootstrap-datepicker.js";import "./plugins/bootstrap-datepicker.zh-CN.min.js";

在Directive里，使用Bootstrap-datepicker的代码如下:

link: function (scope, el, attrs) {    $(el).datepicker({format:"yyyy-mm-dd",    language: "zh-CN"});}

webpack.config.js 里引入JQuery，代码如下：

plugins: [    // 其他代码，此处略过    new webpack.ProvidePlugin({        $: "jquery",        jQuery: "jquery"    })]

利用Webpack进行编译，编译的时候并没有抛出时候异常和错误。但载入页面的时候，没有达到预想的效果，Firebug里提示datepicker is not a function 。

解决办法：

查看了一下bootstrap-datepicker.js文件，发现整个代码结构如下：

(function($, undefined){// 此处代码略过}(window.jQuery));

这代码定义一个匿名函数并立即执行。在函数的形参中传入了window.jQuery这个参数。根据这个思路，我找到了解决方法：
在webpack.config.js里进行如下设置。

plugins: [    // 其他代码，此处略过    new webpack.ProvidePlugin({        $: "jquery",        jQuery: "jquery",        'window.jQuery': 'jquery'  // 新的一行    })]

其中’window.jQuery’: ‘jquery’ 是新加的配置。对应于插件中传入函数的参数window.jQuery’。

经过上述修改后，功能正常。