Как строить современные приложения с WebPack

Автор оригинала: Samuel Omole.

Как далеко мы можем получить с конфигурацией WebPack по умолчанию?

У меня была привилегия выступления в GDG Devfest в прошлом месяце с разговором, которое было сосредоточено вокруг, используя WebPack в наших современных приложениях. Вы можете проверить слайды здесь Отказ

Ежедневно я добираюсь до работы инженера и/или консультанта с удивительными и быстромирующимися командами, и WebPack выглядит как повторяющийся коэффициент на протяжении всех этих команд (мы используем Reactjs для большинства наших приложений). Первоначально мой разговор должен был сосредоточиться на использовании WebPack с Frontend Frameworks/библиотеками, такими как invertjs, vue, угловые и т. Д.

Перед отправкой моего предложения я решил запустить мини-опрос, чтобы узнать, что люди думали о WebPack. К моему удивлению, многие люди пометили WebPack, как «используется только с каркасами», которые были далеко не правда. Третьи сказали, что «Настройка Уэбпака была пугающей». Это привело к тому, что я сосредоточил больше на использовании WebPack с ванильными JS и видя, как далеко мы можем пойти с конфигурацией по умолчанию WebPack.

Но сначала:

Что такое WebPack?

Я знаю, это упрощение того, что делает WebPack, но люди, кажется, понимают это. Чтобы больше объяснить, WebPack – это Bundler, который ищет модули JavaScript с помощью зависимостей (в основном, файлы JavaScript, которые нуждаются в коде из других файлов JavaScript), сквошят их вместе, а затем создают файлы JavaScript или файлы, которые не имеют зависимостей. Таким образом, они могут быть легко отправлены в браузер.

История WebPack

Чтобы понять проблемы, которые пытается решить WebPack, нам нужно немного узнать об истории самого веб -пака. Чтобы сохранить этот раздел очень коротким, я только что изложил два важных инструмента и одну концепцию:

• Google Web Toolkit : Это рамка из Google, которая преобразует Java в JavaScript (я знаю, верно?). Он имеет одну функцию, которая, кажется, моя личная любимая особенность в WebPack, которая «разделение кода». (Я объясню расщепление кода в последующем статье.)
• Модули_webmake : Это библиотека, из которой начинается веб-папак. По сути, это инструмент, который позволяет нам организовать наши файлы JavaScript для браузера так же, как мы делаем для Nodejs (Awesome).
• IIFE: означает немедленно вызванный функцией выражения. Это в основном функция JavaScript называется или вызывается в то же время, что и она была создана.

Немедленно вызывало функцию выражения

Я сломал это в свой раздел, потому что я должен был объяснить дальше. Это пример IIFE:

Если бы мы поместили эту функцию в нашем теге сценария, это будет работать немедленно. Тег скрипта загружен браузером. Это эквивалентно прикреплению функции к window.Onload Но с дополнительным преимуществом.

Из-за способа замыкания работают в JavaScript, все переменные, которые были объявлены в IIFE, выделяются в этой функции. Это означает, что у меня не будет проблем, таких как столкновения пространства имен в моей кодовой базе, но в то же время у меня все еще есть доступ к функциям, выставленным IIFE.

Почему WebPack?

Итак, какие проблемы мы сталкиваемся сегодня, что WebPack помогает нам решить?

Во-первых, у нас есть проблема тегов скрипта. Я работал на кодовой базе, где каждая HTML-страница имеет по крайней мере 30 тегов сценариев, расположенных в очень точном порядке. Я знаю, что некоторые могут сказать, что это не проблема, но браузер должен будет сделать один запрос на файл, который может причинить вред вашему «нагрузке». Также теги скрипта могут усердно управлять, где перегруппировка только что можно сломать приложение (я попробовал это?).

Во-вторых, у нас все еще есть вопрос о том, где глобальное пространство имен может быть загроможден. Я знаю, что мы очень творческие люди, особенно когда речь идет о переменных именования, но затем, когда вы работаете над большей командой, есть времена, когда имена переменной просто столкнутся друг с другом. Или даже ваше будущее снова может подумать о том же имени (да, это происходит).

Я знаю некоторые организации, которые делают его привычкой для своих разработчиков, чтобы всегда сохранять свои переменные в рамках своей функции, но мы не всегда не можем положиться на это (или на это ). В конце концов, это просто отделение трудного озабоченности.

В-третьих, помните, что я упомянул, что WebPack произошел из модулей_Webmake. Поскольку WebPack позволяет нам организовать наши файлы так же, как мы делаем в Nodejs (с использованием Commonjs), у нас есть дополнительное преимущество написания модульного кода, которые действительно хорошо ведутся (просто попросите людей, которые используют Frameend Frameworks).

Commonjs.

Я не буду объяснять слишком много о CJS, так как это не точка статьи. Но вы можете сказать, что это система модуля JS, используемая в Nodejs Отказ

WebPack позволяет нам использовать этот модуль и даже систему модуля ES «Лучшую» в браузере без какой-либо проблемы (WebPack обрабатывает его в Smart Way). Это помогает нам написать действительно модульный и ремонтопригодный код, в котором файл JS может обрабатывать одну функциональность (принцип одной ответственности).

Модули ES (ESM)

Это еще одна модульная система, которая, поверьте, или нет, уже реализована текущими браузерами. Но, к сожалению, у него есть это ограничения там. WebPack также позволяет нам использовать этот модуль без проблем (так как WebPack по-прежнему преобразует его в конце), но я обнаружил, что использование ESM делает большинство кодовых базов, которые я работал над более читаемым. Я бы любил погрузиться глубже в этом, но это не целью этой статьи. Для лучшего объяснения я бы порекомендовал это удивительно Статья Отказ

Как работает WebPack?

Я знаю, что я сказал ранее, что WebPack Magic, но я солгал. Чтобы поставить его как можно просто:

• WebPack передает путь к одной точке записи, которая является файлом JS и ищет отчетности импорта (это может быть либо ESM, либо CJS).
• Затем он проходит импортированный файл, также ищет больше операторов импорта, в то время как он создает график зависимости в процессе.

Чтобы объяснить лучше, посмотрите на изображение:

У меня там два файла, index.js и помощники.js Эти два файла выполняют разные функции, но я импортирую и использую функцию в HEMENTERS.JS в моем файле index.js. По умолчанию точка входа WebPack – ./src/index.js И оттуда он пытается создать график зависимости, как показано ниже:

С чего начать

Чтобы лучше понять, как работает WebPack, мы собираемся построить простое приложение Todo. Он будет иметь только основную функцию добавления и удаления функциональности, и мы собираемся объединить его, используя конфигурацию по умолчанию WebPack по умолчанию (так что нет файла конфигурации WebPack). Это то, что приложение будет выглядеть так:

Первый шаг – создать новый каталог проекта и создавать две папки, папку с именем Dist И другой по имени SRC Отказ По умолчанию точка входа WebPack – это путь ./src/index.js. И это выводит в комплекте JS в ./dist/main.js – Вот почему мы создаем две папки.

В Dist Папка Вы можете создать index.html файл. Это не нужно для WebPack, поскольку файл можно разместить в любом месте в каталоге проекта, и вы можете просто сделать ссылку на main.js файл. В конце концов, ваша структура проекта должна выглядеть так:

В SRC Папка мы создадим index.html Файл, где мы начнем реализацию функций приложения нашего To-Do. Но сначала давайте заполним index.html файл. Поскольку создание приложения TO-DO не является частью этого руководства, я просто покажу код ниже:

  
    
  
  
    

      

        Add Item
        
        Add
      
      
      
Todo
      

      
    
    
  

Давайте теперь сделаем его функциональным. Мы собираемся сломать две функции (добавить и удалять) в свои собственные файлы, а затем импортировать их в index.js Отказ Мы создадим два файла в нашем SRC Папка по имени addtask.js и deletetask.js Отказ Ваша структура проекта теперь должна выглядеть так:

Теперь мы можем начать добавлять необходимую логику, поэтому давайте реализуем deletetask.js Во-первых, потому что у него нет зависимостей. Вставьте это в свою deletetask.js файл:

const deleteTask = function(e) {
  console.log("Delete Task...", e);
  //Remove the parent list item from the ul
  var listItem = e.target.parentNode;
  var ul = listItem.parentNode;
  ul.removeChild(listItem);
};


export default deleteTask;

Все, что происходит в этом файле, мы создаем Делиттасская Функция, а затем экспортируя его в качестве экспорта по умолчанию.

Теперь мы можем реализовать Addtask функция. В addtask.js Файл Добавить следующий код:

import deleteTask from "./deleteTask";


const createNewTaskElement = function(taskString) {

  const listItem = document.createElement("li");
  const label = document.createElement("label");
  const deleteButton = document.createElement("button");
deleteButton.innerText = "Delete";
  deleteButton.className = "delete";
  deleteButton.addEventListener("click", deleteTask);

	label.innerText = taskString;
	listItem.appendChild(label);
  	listItem.appendChild(deleteButton);
	return listItem;
};


const addTask = function(e) {
  const taskList = document.getElementById("tasks");
  const task = document.getElementById("new-task");
  if (task.value !== "") {
    const newTaskItem = createNewTaskElement(task.value);
    taskList.appendChild(newTaskItem);
    task.value = "";
  }
};


export default addTask;

В этом мы в первую очередь импортируют deletetask.js файл. По умолчанию, если в импорте не указано расширение, WebPack автоматически предполагает, что это .js файл. Тогда у нас есть функция, которая создает элемент списка, содержащий задачу, которая была введена в форме. Единственное, что следует отметить, что мы присоединяем функцию удаления к обработке кликов кнопки удаления. Затем мы создаем фактическую функцию Addtask и экспортируйте ее.

Затем нам нужно импортировать наши Addtask функция в index.js Отказ Вставьте код ниже в свой index.js файл:

import addTask from './addTask';

const addTaskButton = document.getElementById("addTask");

addTaskButton.addEventListener("click", addTask);

Это довольно просто: мы импортируем Addtask функционировать и прикрепить его к обработчику щелчка для AddTaskButton Отказ Если вы следили за шагами выше, вы должны быть хорошими, чтобы пойти.

Наконец, чтобы получить нашу main.js Файл нам нужно запустить WebPack через нашу кодовую базу. Для этого шага убедитесь, что у вас есть Nodejs Установлено в вашей системе, то мы установим WebPack во всем мире, используя эту команду:

npm install -g webpack OR sudo npm install -g webpack

Как только это будет сделано, установка Запустите следующую команду:

webpack

Он успешно связывает наш файл, но мы должны увидеть предупреждение в терминале, как это:

WebPack просто предупреждает, что мы не указывали Режим . Мы могли бы оставить его как и запустить код, все должно работать нормально. Но если вам не нравится предупреждение, вы можете запустить WebPack, как это:

webpack --mode=development

И ты добрые идти.

Обертывание

Если вы потеряли по пути, вы всегда можете использовать GitHub репо Для справки (у нее есть некоторые CSS, укладывая в нем).

Я надеюсь, что эта статья смогла показать вам, какой WebPack должен предложить (только основные основы, без конфигурации. В последующих статьях я постараюсь показать, как настроить различные пользовательские конфигурации для функций, таких как Код расщепления , Ленивая загрузка и настроить WebPack для работы с многостраничными приложениями.

Чтобы сохранить эту статью как можно основной, я избегал использования Package.json файл в статье. Использование Package.json Файл и установка WebPack локально является наиболее масштабируемым способом использования WebPack, и я пойду в него в моей следующей статье на использовании WebPack.

Чтобы помочь ориентироваться на предстоящие статьи, это действительно поможет, если вы сможете бросить комментарий того, что вы хотели бы видеть, объясненные или реализованные в отношении WebPack. ??

Я хотел бы особенно благодарить Шон Т. Ларкин , Израиль Обигба а также Хасан Сани за их обратную связь в составлении статьи лучше, чем изначально планировалось. Вы все рок!