Доступные функции Webpack 2 из разных файлов js

Только начал использовать webpack-2 и есть вопрос о глобальных функциях. Имейте эти функции в файле js с именем showPictures.js:

function isEmpty(el) {
    var result = !$.trim(el.html());
    return result;
}
function showPicturesList() {
    if (!isEmpty($('#picture-name-list'))) {
        var pictureList = document.getElementById("added-pictures");
        pictureList.style.visibility = 'visible';
    }
}

И у меня есть еще один файл util.js, в котором я вызываю функцию showPicturesList()

window.onload = function(){
    showPictureList();
}

Просто используя js, я бы импортировал оба скрипта в свой html, но с помощью webpack я могу сделать один файл для них обоих, поэтому webpack.config.js я добавил оба этих файла как entry массив. Мой выходной файл bundle.js выглядит так, как должен, внутри него есть оба этих файла. Вопрос в том, как проще всего с минимальными изменениями в файлах js вызвать функцию showPictureList() из файла utils.js?


javascript webpack-2
person Lukas Karmanovas    schedule 17.02.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете использовать модули ES2015/ES6 для импорта своих функций, которые были экспортированы в другой файл. В вашем файле showPictures.js вы экспортируете функции, которые хотите предоставить, добавляя ключевое слово export.

export function showPicturesList() {
    if (!isEmpty($('#picture-name-list'))) {
        var pictureList = document.getElementById("added-pictures");
        pictureList.style.visibility = 'visible';
    }
}

А затем вам нужно импортировать их в свой util.js.

import { showPicturesList } from './showPictures';

Подробную информацию о том, как использовать модули, можно найти в статье Изучение JS: модули.

При этом вам также не нужно добавлять оба файла в entry в конфигурации вашего веб-пакета, потому что веб-пакет увидит импорт и включит все, что вы импортируете.

person Michael Jungo    schedule 17.02.2017
comment
А как насчет использования этой функции в html? Это тоже будет работать или нет? - person Lukas Karmanovas; 17.02.2017
comment
Нет, это не так. Вам нужно будет указать его либо в конфигурации вашего веб-пакета, либо определив его на window. Подробности см. в этом вопросе: Вызов webpacked-кода извне (тег HTML-скрипта ) - person Michael Jungo; 17.02.2017