Webpack, неизвестный герой современных фреймворков JavaScript и его мощь для библиотеки JavaScript…

Первоначально опубликовано на https://jrichardsz.github.io 25 февраля 2023 г.

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

В основном я покажу вам, как веб-пакет используется для предоставления нам мощных фреймворков, таких как angular, vue, react

Древние дни

В древние времена для веб-разработки требовался только простой редактор и пара файлов.

И отношение между ними было вручную

Этого было достаточно для тех дней, когда было задействовано несколько пользователей, несколько требований, несколько серверов, один браузер и т. д.

Сегодня эти файлы еще востребованы, но они не закачиваются вручную в голову, html не привязывается вручную к данным, css супер продвинутый и другие сумасшедшие фичи, связанные с современной веб-разработкой.

ССР против КСО

Никто в здравом уме не стал бы использовать инфраструктуру SSR для разработки современной корпоративной сети. Возможно, для целевых страниц (Wordpress, Drupal), но не для Интернета, где взаимодействие с пользователем должно быть на другом уровне, например, Clickup.com или Trello:

В рамках SSR html создается на сервере с использованием некоторого механизма шаблонов, а затем отправляется в браузер. Вы можете обнаружить такие фреймворки, если требуется серверный язык: Java, php, python, ruby, c# и т. д.

В CSR-фреймворках HTML-код, отправляемый в браузер, минимален. Пакет javascript отвечает за рендеринг или создание контента, смешивая в реальном времени: javascript, ajax и данные микросервисов (json). Вы можете обнаружить такие фреймворки, если язык сервера не требуется: Java, php, python, ruby, c# и т. д., кроме Nodejs.

Итак, запомните это, пожалуйста:

Не используйте чистый SSR для веб-разработки. SSR нуждается в большей мощности процессора, поэтому теплая земля будет вам благодарна!

Современный стек внешнего интерфейса

Фронтенд-фреймворки сегодня доминируют, потому что только у нас есть эти возможности

Есть и другие, но предыдущие перечисленные известны во всем мире, и есть много профессий, если вы знаете одну из них.

Но если современный браузер по-прежнему требует и index.html, main.css, main.js, возникает вопрос:

Как эта структура конвертирует множество файлов в эти файлы 03?

Вебпак

Все перечисленные выше фреймворки (angular, react, vue) используют webpack для волшебства. Вот пример официального репозитория angular github

Если я получу 50 хлопков, я выложу сюда примеры vue и react.

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

Режим разработки с веб-пакетом

В древности (надеюсь что) разработчики открывали свою html разработку вот так

Но сегодня, когда вы запускаете npm run dev, URL-адрес открывается в вашем браузере по умолчанию.

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

https://webpack.js.org/configuration/dev-сервер/

Минимизировать или транспилировать с помощью веб-пакета

Эта часть сложна для юниоров: Браузер не понимает angular, react или vue

Браузеру нужен простой, старый, чистый и чистый javascript, который называется Vanilla Js.

Так что да, webpack отвечает за преобразование или, точнее, перенос файлов реакции в простой и чистый vanilla js, index.html и т. д. с помощью знаменитой сборки npm run.

Веб-загрузчик

Это чистая магия

Загрузчик Webpack — самая интересная, удивительная и полезная функция webpack. По сути, это метод javascript, который выполняется при каждой сборке (локальной или для рабочей) и передается для всех файлов в вашей рабочей области.

function loader(content) {
  // content could be the index.html, 
  // main.css , foo.ts
  // bar.js
}

Итак, если вы мастер струнных инструментов, вы можете дать волю своему воображению следующим образом:

Простой заполнитель (@ACME_UI) для замены одной специальной строки другой строкой. Это можно сделать в загрузчике webpack

import './App.css';
import HelloWorld from './components/HelloWorld'

const App = () => {
  return (
    @ACME_UI
  );
}
export default App;

Или вместо того, чтобы вручную создавать файлы js, создайте свой собственный механизм внедрения зависимостей, например, эту аннотацию или декоратор @Autowired.

class HelloComponent {
    first_name: string;
    last_name: string;

    @Autowired
    settings: object
  
    constructor(fname: string, lname: string)
    {
        first_name = fname;
        last_name = lname;
    }
    getName(): string
    {
        var fullname: string = first_name + last_name;
        return fullname;
    }
}

Подробнее здесь https://webpack.js.org/loaders/

Ссылки на изображения

Заключение

Webpack является неизвестным героем почти всех современных фреймворков javascript и дает вам возможность создать свой собственный фреймворк, подобный моему, под названием LinkStart.js.

Или расширьте существующий своими потрясающими функциями.

Во второй части я расскажу, как использовать загрузчики веб-пакетов с нуля.

До следующего,
JRichardsz