Question

我将Laravel 5.6与Mix一起使用。我想将使用jQuery的插件加载到我的项目中。

我创建了一个 fileuploader.js 文件：

// see more at http://plugins.krajee.com/file-input#installation

import 'bootstrap-fileinput/js/fileinput';
import 'bootstrap-fileinput/js/locales/fr';

它将加载一个npm软件包。在我的 webpack.mix.js 中，我有：

mix.autoload({
    jquery: ['$', 'window.jQuery']
});

mix
    .js('resources/assets/js/app.js', 'public/js')
    .js('resources/assets/js/fileuploader.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sass('resources/assets/sass/plugins/fileuploader.scss', 'public/css')
;

mix.copyDirectory('resources/assets/img', 'public/img');

if (mix.inProduction()) {
    mix.version();
}

在我的 app.js 中，我有：

import $ from 'jquery';
window.$ = window.jQuery = $;
import './bootstrap';

$(function() {
  // some jQuery code
});

我从 bootstrap.js 文件中删除了这一行：

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

但是，当我查看由Webpack生成的/js/fileuploader.js文件时，它仍然会加载完整的jQuery代码。

我的模板中的结果是：

<script src="http://localhost:8000/js/app.js"></script>
<script src="http://localhost:8000/js/fileupload.js"></script>
<script>
    $(function () {
        $('input[type="file"]').fileinput({
            language: 'fr',
            uploadUrl: '/upload',
        });
    })
</script>

我得到了这个错误：

未捕获的TypeError：$（...）。fileinput不是函数

我认为这是因为jQuery（3.3.1版）在两个JS文件中均加载了2次。我该如何预防呢？谢谢

Answer 1

尝试删除

mix.autoload({
    jquery: ['$', 'window.jQuery']
});

Laravel Mix始终包含jQuery

1 个答案: