使用 laravel mix 来包含 js 依赖
Using laravel mix to include js dependencies
我真的无法让我的 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 模块:
- bootstrap-sass
- jquery
- jquery-ui
我认为您应该在满足条件时加载 jquery-ui,例如:
if (window.loadJQueryUI) {
require('jquery-ui');
}
并且你需要为这两个页面初始化loadJQueryUI
,像这样:
<script type="text/javascript">
window.loadJQueryUI = true;
</script>
我最后只是创建了一个我需要 jquery,bootstrap.js 的文件,然后我在两个页面的特定文件中需要这个文件... 在其代码下方:
app.js
window.$ = window.jQuery = require('jquery');
require('./bootstrap');
page.js
require('./app.js')
require('jquery-ui/ui/widgets/slider');
它现在正在工作,即使现在我必须在所有视图中包含一个 js 文件...质疑它仍然打开,我希望有人有更好的主意。
我认为 laravel-mix
仅在您的小型网站的页面都包含相同的 app.js
和 app.css
文件时才起作用。
当您的复杂门户包含多个页面且具有不同的前端“插件”集时,您必须拆分条目并自动生成 table 依赖项。
经过大量时间的搜索,我得出的结论是最好的方法是从 Symfony 切换到 webpack-encore
。
您可以在此处阅读有关其功能的更多信息 Webpack Encore Official Documentation。
现在的问题是如何将它嵌入到Laravel?这很简单,我只是为此对 Symfony 的 PHP 包进行了逆向工程,结果如下: https://github.com/ntpages/laravel-encore
现在您只需在页面条目中包含您的依赖项,一切都会自动处理。