【029】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’。

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