Laravel webpack 使用一个简单的 jquery 插件答案

【问题标题】：Laravel webpack use a simple jquery pluginLaravel webpack 使用一个简单的 jquery 插件
【发布时间】：2020-04-24 17:58:57
【问题描述】：

在 Laravel 的最新版本中，我无法使用简单的 jQuery 插件。

‍我尝试使用‍‍‍bootstrap-datepicker插件。所以我用了：

yarn add bootstrap-datepicker

然后，在我的 app.js 中：

import './bootstrap';
import 'bootstrap-datepicker';

在 bootstrap.js 中，我有：

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

我猜这应该让 jQuery 全球化。

但是当我尝试时：

$(function() {
        $('.input-daterange input').each(function() {
            $(this).datepicker('clearDates');
        });
});

我得到了错误：

app.js:41747 Uncaught TypeError: $(...).datepicker is not a function

我有很多插件（daterangepicker，datepicker...）这个错误

要使用 Webpack / Mix 来使用一个简单的 jQuery 插件，我需要做什么？

【问题讨论】：

【解决方案1】：

我是这样弄的：

在控制台中：

npm i jquery-ui-dist

/resources/assets/js/bootstrap.js：

try {
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
    require('jquery-ui-dist/jquery-ui')
} catch (e) {}

/resources/assets/sass/app.scss：

@import'~jquery-ui-dist/jquery-ui';

在你的刀片中或在 boostrap.js 的末尾

$('.input-daterange input').datepicker(params)

在这种情况下，我使用 jQuery UI DatePicker

【讨论】：

【解决方案2】：

如果jQuery和jQuery Plugin不在同一个文件中，需要使用$.fn.extend()将plugin对象的内容合并到jQuery原型上，提供新的jQuery实例方法。

$.fn.extend({
    datepicker: function() {
        require('bootstrap-datepicker');
    }
});

【讨论】：