Javascript 使用laravel mix包含js依赖项

我真的无法让我的js库正常工作，前一段时间我决定为我使用的每个库使用一个单独的js文件（因此我的布局中包含一个jquery.js文件和一个bootstrap.js文件），在我不得不将jquery ui添加到这个混乱中之前，一切都正常工作，并且出现了这个错误

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

在我加载之前，jquery和jquery ui都在同一个文件中。问题是我不想在包含jquery的任何地方都包含jquery ui，因为我只在两个页面中使用它。下面我将列出我的代码：

jqueryui.slider.js:

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

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

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

app.js:

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

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

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

webpack.mix.js:

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

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

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

我正在使用以下npm模块：

• 引导式sass
• jquery
• jquery用户界面

---

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

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

您需要为这两个页面初始化

loadJQueryUI

，如下所示：

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

window.loadJQueryUI=true；

最后，我创建了一个文件，其中需要jquery、bootstrap.js，然后在两个页面的特定文件中需要这个文件。。。 代码如下：

app.js

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

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

page.js

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

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

---

现在它正在工作，即使现在我必须在所有视图中包含一个js文件…问题仍然存在，我希望有人有更好的想法。

如果你仍然好奇挖掘这样的问题，这里有一个参考，谢谢@Chay22，我稍后会研究它，如果我找到更好的方法，我会发布它