使用laravel mix来包含js依赖项

时间:2017-05-15 08:38:31

标签: javascript jquery-ui webpack laravel-5.4 laravel-mix

我无法真正让我的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模块:

  • 自举-SASS
  • jquery
  • jQuery的UI

3 个答案:

答案 0 :(得分:2)

我最后创建了一个文件,我需要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有一个更好的想法。

答案 1 :(得分:1)

我认为 laravel-mix 仅在您的小型网站的页面都包含相同的 app.jsapp.css 文件时才适用。

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

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

您可以在此处Webpack Encore Official Documentation阅读有关其功能的更多信息。

现在的问题是如何将其嵌入到 Laravel 中?这很容易,我刚刚为此对 Symfony 的 PHP 包进行了逆向工程,结果如下: https://github.com/ntpages/laravel-encore

现在您只需要在页面条目中包含您的依赖项,它就会自动处理。

答案 2 :(得分:-1)

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

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

您需要为这两个页面初始化loadJQueryUI,如下所示:

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