使用 laravel mix 包含 js 依赖答案

【问题标题】：Using laravel mix to include js dependencies使用 laravel mix 包含 js 依赖
【发布时间】：2017-10-13 23:08:27
【问题描述】：

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

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

直到我在同一个文件中加载 jquery 和 jquery-ui。问题是我不想在我包含 jquery 的任何地方都包含 jquery ui，因为我只在 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 模块：

【问题讨论】：

【解决方案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 文件...问题它仍然打开，我希望有人有更好的主意。

【讨论】：

【解决方案2】：

我认为laravel-mix 仅在您拥有包含相同app.js 和app.css 文件的页面的小型网站时才起作用。

当您的门户复杂且包含多个页面且具有不同的前端“插件”集时，您必须拆分条目并自动生成依赖关系表。

经过大量搜索，我得出结论，最好的方法是从 Symfony 切换到 webpack-encore。

你可以在这里Webpack Encore Official Documentation阅读更多关于它的功能。

现在的问题是如何将它嵌入到 Laravel 中？这很简单，我刚刚对 Symfony 的 PHP 包进行了逆向工程，结果如下： https://github.com/ntpages/laravel-encore

现在您只需在页面条目中包含您的依赖项，这一切都会自动处理。

【讨论】：

【解决方案3】：

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

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

并且你需要为这两个页面初始化loadJQueryUI，像这样：

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

【讨论】：