Laravel Webpack使用一个简单的jquery插件

Question

在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不是一个函数

我在使用许多插件（daterangepicker，datepicker ...）时遇到此错误

使用Webpack / Mix只使用一个简单的jQuery插件该怎么办？

Answer 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

Answer 2

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

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