Docker

./Dockerfile

Dockerfile - это текстовый документ, содержащий все команды, которые могут быть вызваны в командной строке для создания образа Docker. В Dockerfile:

• Используется образ node:18-alpine в качестве базового. Это означает, что контейнер будет запущен на Node.js версии 18 на Alpine Linux, который является легким дистрибутивом Linux.
• Устанавливается рабочий каталог в /home/app.
• Копируется содержимое каталога app с хоста в рабочий каталог в контейнере.
• Устанавливаются некоторые утилиты командной строки, такие как mc, nano, curl, wget, bash, gnupg, zsh, git, make.
• Устанавливаются zsh и oh-my-zsh для улучшения командной строки.
• Открываются порты, указанные в переменной окружения ${PORT_1}, ${PORT_2}, ${PORT_3}.

./docker-compose.yml

Docker Compose - это инструмент для определения и запуска многоконтейнерных приложений Docker. В файле docker-compose.yml:

• Определяется одна служба под названием web.
• Строится образ Docker из Dockerfile в текущем каталоге.
• Задается имя образа с помощью переменной окружения ${IMAGE_NAME}.
• Задается имя контейнера с помощью переменной окружения ${CONTAINER_NAME}.
• Настраивается контейнер так, чтобы он всегда перезапускался.
• Открываются порты, указанные в переменных окружения ${PORT_1}, ${PORT_2}, ${PORT_3}.
• Монтируется каталог app с хоста в /home/app в контейнере и файл .env с хоста в /home/app/.env в контейнере.

./Makefile

Makefile - это файл, используемый утилитой make для автоматизации сборки программ. В Makefile:

• Определяется набор команд для работы с Docker, таких как build, up, down, bash.
• Определяется набор команд для работы с приложением внутри Docker контейнера, таких как app-install-npm, app-install-yarn, app-start, app-build-dev, app-build-prod, app-browser.

Чтобы увидеть список доступных команд Makefile, нужно выполнить команду make в терминале.

🔶 Docker команды:

• make build: Строит Docker образ без использования кэша.

• make up: Запускает Docker контейнер и открывает терминал.

• make down: Останавливает Docker контейнер.

• make bash: Открывает терминал в текущем Docker контейнере.

🚀 Команды приложения:

• make app-install-npm: Устанавливает необходимые пакеты NPM для приложения.
• make app-install-yarn: Устанавливает необходимые пакеты YARN для приложения.
• make app-start: Запускает сервер приложения в режиме разработки.
• make app-build-dev: Собирает приложение в режиме разработки (несжатые файлы).
• make app-build-prod: Собирает приложение в режиме продакшена (сжатые файлы).
• make app-browser: Запускает приложение с Browser-Sync для тестирования в реальном времени.

TypeScript и Webpack

tsconfig.json

• Настраивается базовый URL и пути для модулей.
• Устанавливается целевую версию ECMAScript на es6.
• Включаются некоторые библиотеки, такие как ES2020, DOM, DOM.Iterable.
• Включаются некоторые опции для линтера и компилятора, такие как strict, allowJs, noImplicitAny, noUnusedLocals, noUnusedParameters, noFallthroughCasesInSwitch.
• Указываются, какие файлы должны быть включены и исключены из компиляции.

Описание используемых параметров tsconfig.json:

• "baseUrl": "./": Этот параметр используется для разрешения неабсолютных модульных импортов. В данном случае, он установлен на текущий каталог.
• "paths": Этот параметр используется вместе с baseUrl для указания псевдонимов путей, что упрощает импорт модулей. Например, "app": ["./src/app"] позволяет импортировать модули из ./src/app просто используя import ... from 'app'.
• "module": "es6": Этот параметр указывает, какой стиль модулей использовать. В данном случае, это ECMAScript 2015 модули.
• "target": "es6": Этот параметр указывает, какую версию ECMAScript целить при компиляции TypeScript. В данном случае, это ECMAScript 2015.
• "lib": ["ES2020", "DOM", "DOM.Iterable"]: Этот параметр указывает, какие библиотеки объявлений включить в компиляцию. В данном случае, это ECMAScript 2020, DOM и DOM.Iterable.
• "pretty": true: Этот параметр указывает, следует ли использовать цвета и отступы в сообщениях диагностики.
• "moduleResolution": "bundler": Этот параметр указывает стратегию разрешения модулей. В данном случае, это "bundler", что означает, что разрешение модулей будет осуществляться как в bundler'ах типа webpack.
• "allowSyntheticDefaultImports": true: Этот параметр позволяет импортировать модули, которые не имеют экспорта по умолчанию, как если бы они имели его.
• "forceConsistentCasingInFileNames": true: Этот параметр заставляет TypeScript учитывать регистр при импорте файлов. Это может быть полезно для предотвращения проблем с регистром на системах, которые не учитывают регистр.
• "strict": true: Этот параметр включает все строгие проверки типов.
• "allowJs": true: Этот параметр позволяет компилировать JavaScript файлы.
• "noImplicitAny": true: Этот параметр говорит компилятору генерировать ошибку на выражениях и объявлениях, которые имеют неявный тип any.
• "noUnusedLocals": true: Этот параметр говорит компилятору генерировать ошибку при наличии неиспользуемых локальных переменных.
• "noUnusedParameters": true: Этот параметр говорит компилятору генерировать ошибку при наличии неиспользуемых параметров.
• "noFallthroughCasesInSwitch": true: Этот параметр говорит компилятору генерировать ошибку для случаев в операторе switch, которые не заканчиваются break или return.
• "noImplicitReturns": true: Этот параметр говорит компилятору генерировать ошибку для любых кодовых путей, которые не возвращают значение в функции, если функция указывает возвращаемый тип.
• "strictNullChecks": true: Этот параметр говорит компилятору быть более строгим в отношении null и undefined.
• "include": ["src/**/*"]: Этот параметр указывает, какие файлы должны быть включены в компиляцию. В данном случае, это все файлы в каталоге src.
• "exclude": ["node_modules", "public/**/*"]: Этот параметр указывает, какие файлы должны быть исключены из компиляции. В данном случае, это все файлы в каталогах node_modules и public.

webpack.config.json

• Определяются точки входа для приложения.
• Настраивается HtmlWebpackPlugin для генерации HTML-файлов, которые включают скрипты.
• Настраивается сервер разработки с определенными параметрами, такими как порт, хост, статический каталог и файлы для отслеживания.
• Настраиваются правила для обработки различных типов файлов, таких как TypeScript, CSS, изображения и шрифты.
• Настраиваются расширения, которые должны быть разрешены, и плагины для разрешения путей в соответствии с файлом tsconfig.json.

Описание конфигурации webpack.config.json

• const path = require('path');: Это импорт Node.js модуля для работы с путями файлов.
• const HtmlWebpackPlugin = require('html-webpack-plugin');: Это импорт плагина Webpack, который генерирует HTML файлы для приложения.
• const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');: Это импорт плагина Webpack, который позволяет разрешать пути, определенные в файле tsconfig.json.
• const mode = process.env.NODE_ENV;: Это определение режима сборки, который может быть 'production' или 'development'.
• const isProductionMode = mode === 'production';: Это булево значение, указывающее, является ли текущий режим режимом 'production'.
• const entries = {...};: Это определение точек входа для приложения. Каждая точка входа представляет собой JavaScript файл, который будет использован как начальная точка для сборки приложения.
• const html = [...];: Это массив экземпляров HtmlWebpackPlugin, каждый из которых генерирует HTML файл, включающий скрипты, указанные в свойстве chunks.
• module.exports = {...};: Это экспорт конфигурации Webpack. Внутри этого объекта:
  • devServer: Это конфигурация сервера разработки Webpack.
  • mode: Это режим сборки.
  • devtool: Это опция, которая контролирует, как исходные карты генерируются.
  • target: Это опция, которая контролирует, как Webpack должен компилировать код.
  • entry: Это точки входа для приложения.
  • output: Это опции, которые контролируют, куда Webpack должен выводить собранные файлы.
  • module: Это опции, которые контролируют, как Webpack должен обрабатывать различные типы файлов.
  • resolve: Это опции, которые контролируют, как Webpack должен разрешать импорты модулей.
  • plugins: Это массив плагинов, которые Webpack должен использовать при сборке приложения.

NPM и package.json

./package.json

• Используется husky для управления git hooks.
• Настраивается скрипт prepare для установки husky.

./app/package.json

• Устанавливается набор зависимостей разработки, таких как TypeScript, Webpack, ESLint, Prettier и другие.
• Устанавливаются некоторые зависимости для приложения, такие как axios и normalize.css.
• Определяются целевые браузеры для приложения с помощью browserslist.

---

Пример использования функций

Пример скрипта который будет добавлять необходимые скрипты на страницу. Это не обязательно виджеты (widgets), может быть любое назначение, например целая страница

// index.js
function addScriptsForWidgets(widgets) {
  // Проходим по каждому виджету
  for (let widget of widgets) {
    // Если на странице есть элемент с атрибутом data-widget, значение которого совпадает с именем виджета
    if (document.querySelector(`[data-widget="${widget.name}"]`)) {
      // Создаем новый элемент script
      let script = document.createElement('script');
      // Устанавливаем атрибут src
      script.src = widget.scriptUrl;
      // Добавляем скрипт в футер
      document.body.appendChild(script);
    }
  }
}

// Использование функции
addScriptsForWidgets([
  {name: 'tabs', scriptUrl: 'https://example.com/source/url_to_tabs_script.js'},
  {name: 'slider', scriptUrl: 'https://example.com/source/url_to_slider_script.js'}
]);

---

Установка Make для Windows

1. Открыть Powershell от имени администратора
2. Выполнить команду

#если походу установки будут задаваться вопросы отвечать YES
Set-ExecutionPolicy Bypass -Scope Process -Force; `
  iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

3. Далее в Powershell выполнить команду

choco install make

Инструкция