Илья Борисович Государев - Введение в веб разработку на языке JavaScript

по умолчанию начнёт поиск с
файла index.js
mkdir ./src
echo "console.log(require('./name'));" > ./src/index.js
echo "module.exports = 'Elias';" > ./src/name.js
Выполним первый файл, который обращается ко второму:
node ./src
Elias
Теперь запустим сборку с параметрами по умолчанию, т. е. без всяких
конфигурационных файлов, при которой webpack начнёт анализ с точки входа
./src/index.js и создаст итоговый файл, включающий в себя используемые зависимости:
npx webpack
и получим файл ./dist/main.js
... который и является бандлом и может быть использован независимо от исходных файлов.
Сборщик не осуществляет транспиляцию. Однако он собирает бандл из
модулей. И это значит, что для сборки бандла в том числе из нативных модулей
транспиляция не нужна:

113

Рис. 60. Исходные файлы для работы webpack
Мы можем создать бандл из уже транспилированных файлов: например,
используем в качестве index.js и name.js файлы, соответственно, main.js и
name.js, полученные в результате работы babel на предыдущем этапе. При этом
нужно будет добавить moment к проекту (yarn add moment).
Мы получим файл, который включает в себя ещё и библиотеку moment.js.
Результат можно наблюдать по адресу https://kodaktor.ru/moment_simple
(файл с бандлом переименован из main.js в moment_simple.js).
То есть иными словами webpack собирает как из нативных mjs-модулей,
так и из обычных файлов js, независимо от того, используется ли в них нативная модульность или CommonJS. Самое главное, чтобы от точки входа можно
было переходить по директивам импорта/затребования к анализу других файлов.

Рис. 61. Выполнение сценария
с включением экспериментальной поддержки модулей

114

Рис. 62. Выполнение сценария, собранного из модулей в бандл
Для решения более сложных задач нужны, конечно, конфигурационные
файлы, которые указывают загрузчики, и плагины, и прочие подробности сборки. Здесь полем для исследования становится оптимизация собранного файла
по размеру и другим характеристикам.
Видимо, наиболее частой сферой применения webpack являются сборки
проектов, написанных с использованием не только модульности или новых
особенностей ES, но и специальных языков типа TypeScript или JSX. То есть
проекты на Angular и React очевидно собираются с помощью webpack; при этом
используются достаточно изощрённые конфигурационные файлы, создание которых превращается в один из видов программирования. Это относится как к
клиентской, так и серверной стороне. Например, при использовании React
Server Side Rendering (SSR) язык JSX применяется на серверной стороне, что
требует создания даже нескольких конфигурационных файлов и, возможно, некоторой стратегии управления ими.
Упражнение 9-3
Импортируйте модули moment и faker в сценарий, использующий их
для вставки даты-времени и случайного адреса электронной почти в программно созданный и вставленный в body элемент pre, так, чтобы при каждом обновлении страницы появлялась новая дата-время и новый случайно
сгенерированный адрес электронной почты:

115

Здесь собирается проект, который будет работать в браузере. Поэтому
будут использоваться обращения к методам и свойствам DOM:
• document.createElement;
• document.body.appendChild;
• setAttribute;
• textContent.
Этот проект является по существу моделью того, как осуществляется
взаимодействие с приложением, разработанным с использованием таких библиотек/фреймворков как React. Исходная идея: JavaScript-сценарий выполняет
всю работу, включая генерацию необходимых тегов. Это значит, что от вебстраницы требуется минимум тегов (собственно говоря, только body). Отчасти
эта идея лежит в основе работы SPA (Single Page Application).
Часть I. Создайте проект
mkdir $(date +%Y%m%d_%H%M%S) && cd $_ && yarn init -y
0. Добавьте в проект webpack и webpack-cli в качестве девелоперских зависимостей:
yarn add --dev webpack webpack-cli
1. Добавьте в проект модули moment и faker
yarn add moment faker.
2. Импортируйте moment из moment и internet из faker в файле ./src/index.js.
3. Выражение document.createElement('pre') позволит вам создать элемент pre
для упрощения вывода данных в тело веб-страницы.
4. Его следует подать на вход вызову метода document.body.appendChild и получившийся результат поместить в переменную (назовём её el).
5. Добавляйте содержимое к элементу pre инструкцией вида el.textContent +=
'\n';
Вам нужно добавить результат вызова moment().format с соответствующим
форматом даты-времени и вызов internet.email().
6. По аналогии нужно создать и вставить элемент h4 для выполнения условия
z7a (https://kodaktor.ru/g/z7a) — используйте метод setAttribute для установки
свойств title и id.
7. Запустите сборку, выполнив npx webpack или внеся --">