使用laravel mix来包含js依赖项

Question

我不能真正让我的js库工作，前段时间我决定为我使用的每个库都有一个单独的js文件（所以我有一个jquery.js文件和我的布局中包含的bootstrap.js文件），一切工作得很好，直到我不得不将jquery-ui添加到这个混乱中，并得到了这个错误

Uncaught TypeError: $(...).slider is not a function

直到我加载，jquery和jquery-ui在同一个文件。问题是我不想包括jquery ui到处都包括jquery，因为我只用了2页。 下面我将把我的代码：

jQuery的ui.slider.js：

require('jquery-ui/ui/widgets/slider');
require('./components/carFilter.js');

app.js：

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

webpack.mix.js：

mix.js('resources/assets/js/app.js', 'public/js')
mix.js('resources/assets/js/jquery-ui.slider.js', 'public/js');

我使用以下npm模块：

Answer 1

我最后只是创建一个文件，我需要jquery，bootstrap.js然后我需要在两个页面的特定文件中的这个文件...在它的代码下面：

app.js

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

page.js

require('./app.js')
require('jquery-ui/ui/widgets/slider');

它接缝现在它正在工作，即使现在我必须在所有视图中包含一个js文件...质疑它仍然开放，我希望somone有一个更好的想法。

Answer 2

我认为你应该在满足条件时加载jquery-ui，例如：

if (window.loadJQueryUI) {
    require('jquery-ui');
}

你需要为这两个页面初始化loadJQueryUI ，如下所示：

<script type="text/javascript">
    window.loadJQueryUI = true;
</script>