javascript - 使用 laravel mix 包含 js 依赖

Question

我真的不能让我的 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');

应用程序.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 模块：

score 4 · Accepted Answer

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

应用程序.js

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

page.js

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

它接缝现在它正在工作，即使现在我必须在所有视图中包含一个 js 文件......问题仍然是开放的，我希望有人有更好的主意。

score 1 · Accepted Answer

我认为laravel-mix只有当您的小型网站的页面都包含相同的app.js&app.css文件时才能达到目的。

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

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

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

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

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

score -1 · Accepted Answer

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

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

并且您需要loadJQueryUI为这两个页面进行初始化，如下所示：

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

3 回答 3