Разделение JS библиотек с laravel миксом - PullRequest
Новая
       9

Разделение JS библиотек с laravel миксом

0 голосов
/ 10 января 2020

Я сейчас пытаюсь отделить JQuery от его плагинов, используя laravel mix. В идеале я хочу, чтобы мои представления загружали только то, что им нужно, но я не могу понять, как это сделать правильно с npm.

Например, я использую datatables.net и jquery-mask-plugin пакетов. Оба они зависят от JQuery для работы.

В настоящее время у меня есть следующее

resources/js/app.js

// Core
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
// Plugins
require('datatables.net');
require('jquery-mask-plugin');

webpack.mix.js

mix.js('resources/js/app.js', 'public/js');

<script src="{{ mix('js/app.js') }}"></script>
<script>
$(function() {
    $('#sometable').dataTable(); // Works as expected
});
</script>

Создает один файл public/js/app.js. Я хочу, чтобы он генерировал 3 файла (1 для «ядра» и 2 для плагинов).

Что я пробовал

Создание отдельных файлов для каждого из плагинов, но я сталкиваюсь с проблема, когда я делаю это следующим образом.

resources/js/datatables.js

require('datatables.net');

resources/js/jquery.mask.js

require('jquery-mask-plugin');

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')          // public/js/app.js
   .js('resources/js/datatables.js', 'public/js')   // public/js/datatables.js
   .js('resources/js/jquery.mask.js', 'public/js'); // public/js/jquery.mask.js

Я включаю app.js во все мои взгляды. Если я попытаюсь включить один из плагинов, они не будут работать. 

<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ mix('js/datatables.js') }}"></script>
<script>
$(function() {
    $('#sometable').dataTable(); // $(...).dataTable() is not a function
});
</script>

Мой текущий обходной путь

Копирование скриптов из node_modules вместо компиляции их с использованием mix script.

webpack.mix.js

mix.js('resources/js/app.js', 'public/js') // public/js/app.js
   .scripts(
       ['node_modules/jquery-mask-plugin/dist/jquery.mask.js'],
       'public/js/jquery.mask.js'
   );                                      // public/js/jquery.mask.js

Есть ли лучший способ добиться этого?

...