Как использовать модули веб-пакетов на встроенном JavaScript - PullRequest
Новая
       9

Как использовать модули веб-пакетов на встроенном JavaScript

1 голос
/ 09 марта 2019

Я неопытный веб-разработчик, особенно в том, что касается JavaScript. В последнее время я пытался это исправить, и, поскольку Laravel - мой выбор, я пытаюсь изменить «старый» стиль: 

<script src="script1.js"></script>
<script src="script2.js"></script>
…

к чему-то лучшему. А используя Laravel, логичным шагом будет использование Mix, которая опирается на Webpack.

После долгих проб и ошибок мне удалось заставить работать базовую настройку. У меня есть файл settings.js для изменения настроек модулей по умолчанию, когда это необходимо, и файл app.js для пользовательских функций, который я хотел бы сделать доступным на каждой странице. Я также разделяю модули vendor на файл vendors.js.

Итак, файл bootstrap.js имеет: 

window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
[...]
require('bootstrap-datepicker');
require('bootstrap-year-calendar');

Файл webpack.mix.js имеет: 

mix.autoload({ jquery: ['$', 'jQuery', 'window.jQuery']});
mix.webpackConfig({ resolve: { alias: { jquery: "jquery/src/jquery" }}});
mix.js([
    'resources/js/app.js',
    'resources/js/settings.js'
], 'public/js')
    .extract([
        'lodash',
        'jquery',
        […]
        'bootstrap-datepicker',
        'bootstrap-year-calendar'
    ]);

И перед макетом мастера есть следующие сценарии прямо перед `: 

<script src="{{ mix('/js/manifest.js') }}"></script>
<script src="{{ mix('/js/vendor.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>

Эта настройка, кажется, работает, но есть одна последняя проблема, которую я просто не могу понять. Я также добавляю некоторые javascript на определенные страницы, для функциональности, ограниченной этими страницами (инициализация средств выбора с нестандартными настройками, поведение настраиваемой формы и т. Д.). Таким образом, некоторые страницы имеют дополнительный раздел <script type="text/javascript"> [custom code] </script> перед </body>.

Однако, код там не имеет доступа к модулям: $('.input-daterange').datepicker(); должен инициализировать вход как экземпляр bootstrap-datepicker, но это не так. Конечно, с использованием «старого стиля» это сработало. Теперь я получаю TypeError: undefined is not a function (near '...$('.input-daterange').datepicker...') ошибку.

Итак, моя проблема заключается в следующем: как я могу импортировать необходимые модули для использования в сценарии, встроенном в файл HTML?

P.S. : когда я почти закончил писать этот вопрос, я случайно наткнулся на решение. Тем не менее я решил опубликовать его, потому что а) это может помочь кому-то еще, и б) если есть лучший способ приблизиться к этому, я хотел бы услышать об этом.

1 Ответ

0 голосов
/ 09 марта 2019

Сделав импорт не на встроенном javascript, а на моих app.js или settings.js файлах, он заработал: 

import 'bootstrap-datepicker';
import 'bootstrap-year-calendar';

Однако выполнение импорта на settings.js вместо app.js, похоже, вызывает некоторые проблемы, поскольку нарушает некоторые отдельные функции. Я не уверен, что это потому, что app.js указан первым в файле webpack.mix.js (как показано ниже), но, тем не менее, файл, в который вы производите импорт, имеет значение. 

mix.js([
    'resources/js/app.js',
    'resources/js/settings.js'
], 'public/js')
...