Полезные видео о фронтенде. Подпишись на Rutube

Babel и TypeScript. Выбираем подходящий компилятор

месяц назад·8 мин. на чтение

В чем разница между использованием компиляторов Babel и TypeScript? И какой из них стоит использовать для своего следующего проекта? Разберемся в этой статье.

Babel 7 был выпущен в 2018 году, и с тех пор обновления позволили разработчикам использовать Babel и TypeScript без необходимости усложнять свои сборки с помощью компилятора TypeScript. Но в чем разница между использованием компиляторов Babel и TypeScript? И какой из них стоит использовать для своего следующего проекта? Разберемся в этой статье. Мы рассмотрим следующее:

Что такое Babel?
Общие сведения о компиляторе TypeScript
Роль Babel в интеграции TypeScript
Полифиллы с помощью Babel и TypeScript
Различия между Babel и TypeScript
Что выбрать: Babel или TypeScript?

Что такое Babel?

Babel — это широко используемый компилятор JavaScript, который позволяет разработчикам писать современный код JavaScript с использованием новейших возможностей ECMAScript, обеспечивая при этом совместимость со старыми браузерами и средами. По мере появления новых возможностей JavaScript не все браузеры поддерживают их сразу, что приводит к потенциальным проблемам совместимости для разработчиков, ориентированных на более широкую аудиторию. Babel решает эту проблему, преобразуя современный код JavaScript в более старую версию JavaScript, которая широко поддерживается в различных браузерах и средах. Этот процесс позволяет разработчикам использовать передовые языковые возможности без ущерба для совместимости.

Общие сведения о компиляторе TypeScript

Компилятор TypeScript, tsc, отвечает за преобразование кода TypeScript в простой JavaScript, который может быть выполнен браузерами или Node.js. Понимание того, как работает компилятор TypeScript и процесс компиляции, важно для разработчиков TypeScript для создания эффективного и безошибочного кода JavaScript. Ниже приведен обзор процесса компиляции.

Ввод кода TypeScript: компилятор TypeScript принимает файлы исходного кода TypeScript (.ts) в качестве входных данных. Эти файлы содержат синтаксис, специфичный для TypeScript, включая аннотации статической типизации, интерфейсы, классы и другие функции языка TypeScript
Лексический анализ (сканирование): Первым шагом в процессе компиляции является лексический анализ, также известный как сканирование. Компилятор TypeScript сканирует входной исходный код и разбивает его на отдельные токены (такие как ключевые слова, идентификаторы, литералы, операторы) с помощью процесса, называемого токенизацией
Синтаксический анализ (парсинг): после токенизации компилятор TypeScript выполняет синтаксический анализ. Полученные токены используются для построения абстрактного синтаксического дерева (AST), представляющего иерархическую структуру кода TypeScript
Семантический анализ (проверка типов): После создания AST компилятор TypeScript переходит к этапу семантического анализа, который включает в себя проверку типов. На этом этапе компилятор проверяет типы переменных, выражений и других элементов в коде на основе предоставленных аннотаций типов и выводимых типов
Преобразование и генерация JavaScript: После успешной проверки типов компилятор TypeScript проходит фазу преобразования, где он применяет различные преобразования, оптимизации и транспиляции к AST. Компилятор TypeScript может выполнять такие операции, как удаление специфичного для TypeScript синтаксиса (например, аннотаций типов), преобразование расширенных функций TypeScript (например, декораторов) или транспиляция новых функций ECMAScript (например, async/await) в старые конструкции JavaScript для совместимости с различными браузерами и средами. Окончательным результатом фазы преобразования является новый AST, представляющий собой простой код JavaScript без каких-либо конструкций, специфичных для TypeScript
Создание выходных данных (файлы JavaScript): преобразованный AST используется для создания файлов кода JavaScript (.js), соответствующих исходным файлам TypeScript. Компилятор TypeScript создает соответствующий .js файлы с транспилированным JavaScript-кодом
Файлы деклараций (declaration files, .d.ts): Кроме того, компилятор TypeScript может также генерировать файлы объявлений (.d.ts) в процессе компиляции. Файлы объявлений предоставляют информацию о типах для внешних библиотек или модулей JavaScript, что позволяет разработчикам TypeScript беспрепятственно использовать их в своих проектах TypeScript.
Выдача выходных данных: Наконец, компилятор TypeScript выдает сгенерированные файлы JavaScript (.js) и файлы объявлений (.d.ts) в качестве выходных данных. Теперь эти файлы готовы к запуску браузерами или Node.js

Роль Babel в интеграции TypeScript

Babel играет важную роль в интеграции TypeScript в проекты и рабочие процессы JavaScript. В то время как TypeScript предоставляет статическую типизацию и расширенные языковые возможности, Babel дополняет его, позволяя транспилировать код TypeScript в широко поддерживаемые версии JavaScript. Вот как Babel вносит свой вклад в интеграцию TypeScript:

Транспиляция

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

Совместимость со средствами сборки

Многие современные проекты JavaScript используют инструменты сборки, такие как Webpack, Rollup или Parcel, для объединения и оптимизации кода. Babel легко интегрируется с этими инструментами сборки, позволяя транспилировать код TypeScript и включать его в процесс сборки проекта. Разработчики могут использовать плагины Babel для тонкой настройки процесса транспиляции, делая его совместимым с конкретными потребностями и требованиями проекта.

Упрощение миграции

Babel помогает в постепенной миграции существующих JavaScript-проектов на TypeScript. Настроив Babel для транспиляции кода TypeScript, разработчики могут постепенно внедрять TypeScript в свои проекты, не переписывая всю кодовую базу сразу. Это позволяет разработчикам использовать проверку типов TypeScript и другие языковые функции в определенных частях проекта при переходе на TypeScript.

Поддержка React и JSX

Babel обычно используется в React.js разработке для поддержки синтаксиса JSX, который изначально не понимается браузерами. JSX позволяет разработчикам писать компоненты React более интуитивно. При использовании TypeScript с React - Babel обеспечивает правильную транспиляцию синтаксиса JSX в файлах TypeScript, что позволяет разработчикам писать компоненты JSX в среде TypeScript.

Кастомизация с помощью плагинов

Обширная экосистема плагинов Babel позволяет разработчикам добавлять пользовательские плагины и пресеты, которые подходят для конкретных случаев использования TypeScript. Разработчики могут выбирать из ряда плагинов для поддержки экспериментальных предложений TypeScript, реализации пользовательских преобразований и тонкой настройки процесса транспиляции.

Поддержка экспериментальных функций TypeScript

Babel часто поддерживает функции TypeScript, которые все еще находятся на стадии предложения или еще не стандартизированы ECMAScript. Это позволяет разработчикам экспериментировать с новыми функциями TypeScript до того, как они будут официально приняты, предоставляя им ранний доступ к новейшим языковым возможностям.

Полифиллы с помощью Babel и TypeScript

Полифилл — это процесс добавления кода для поддержки новых функций JavaScript в средах, которые изначально их не поддерживают. Он позволяет разработчикам использовать новейшие функции ECMAScript, сохраняя при этом совместимость со старыми браузерами или средами, в которых отсутствуют поддержка этих функций. Полифилы помогают восполнить этот пробел, обеспечивая недостающую функциональность.

Автоматический полифиллинг Babel

Babel предоставляет автоматический механизм полифиллов с помощью пресета @babel/preset-env. Когда вы настраиваете Babel с помощью @babel/preset-env, он автоматически обнаруживает функциональность ECMAScript, используемые в вашем коде, и включает необходимые полифиллы только для функциональности, отсутствующих в целевой среде. Например, если вы используете в своем коде такую ES6 фичу, как Promise, а целевая среда не поддерживает ее, автоматический полифиллинг Babel будет включать минимальный и оптимизированный полифилл для Promise в выходной код. Такой подход гарантирует, что ваш код будет правильно работать в старых браузерах, в которых отсутствует встроенная поддержка Promise. Преимущество автоматического полифиллинга заключается в том, что он уменьшает размер выходного пакета, включая только необходимые полифиллы, что делает их применение более эффективным.

Подход TypeScript к полифиллингу

Сам по себе TypeScript не предоставляет встроенного полифиллинга, как Babel. TypeScript фокусируется на статической проверке типов и транспиляции, оставляя полифиллинг для отдельной обработки. Пользователи TypeScript обычно используют Babel как часть процесса сборки, а Babel заботится как о транспиляции, так и о полифиллах с помощью @babel/preset-env. Когда код TypeScript транспилируется Babel, в игру вступает механизм автоматического полифиллинга, гарантирующий, что все отсутствующие функции, необходимые для кода TypeScript, будут правильно заполнены. Кроме того, разработчики TypeScript часто используют другие инструменты, такие как core-js или @babel/polyfill, непосредственно для включения конкретных полифиллов в зависимости от потребностей проекта и целевых сред. Чтобы включить явные полифиллы в проект TypeScript, можно импортировать необходимые полифиллы в точке входа их приложения. Например:

import 'core-js'; // имопорт всех полифиллов core-js
// или
import 'core-js/features/promise'; // импорт полифилла только для Promise

Использование core-js или других библиотек полифиллов дает разработчикам больше контроля над тем, какие полифиллы включаются, и позволяет им настраивать поведение полифиллов.

Различия между Babel и TypeScript

Существует несколько существенных различий между использованием TypeScript и использованием TypeScript с Babel. Мы рассмотрим пять самых важных отличий.

Нет проверки типов в Babel

Babel не обращает внимания на причудливые типы TypeScript. Он просто выбрасывает их в мусорное ведро, не проверяя, что они выполняются. Приведенный ниже пример компилируется без каких-либо ошибок или предупреждений с помощью Babel, но не с помощью TypeScript:

const myCoolString : string = 9;

9 - это точно не строка. Удаление типов может быть отличным вариантом для быстрого прототипирования, когда вы хотите, чтобы код компилировался, даже если ваши типы не соответствуют действительности. Если вы пытаетесь что-то напечатать, в какой-то момент вы, вероятно, захотите проверить, что они правильные. К счастью, в этом нет ничего страшного. Вы можете либо позволить своему редактору позаботиться об этом, либо запустить tsc --noEmit, который проверяет типы вашего проекта без компиляции.

Babel не умеет делать `const enums`

По умолчанию TypeScript компилирует весь проект сразу, в то время как Babel компилирует только один файл за раз. Ранее это означало, что Babel не поддерживал функции TypeScript, требующие чтения нескольких файлов, такие как const enums. Однако это уже не так со времен Babel 7.15, который был выпущен в 2021 году. Это означает, что если вы используете последнюю версию Babel, вы сможете скомпилировать все допустимые кодовые базы TypeScript.

Декораторы и метаданные: у TypeScript есть преимущество

В настоящее время спецификация ECMAScript и TypeScript не совсем согласны с тем, как должны вести себя декораторы. Плагины Babel соответствуют спецификации ECMAScript, что означает, что Babel не компилирует декораторы так же, как это делает TypeScript. К счастью для нас, в Babel есть legacy режим для компиляции декораторов со старым поведением. Просто добавьте плагин Babel "@babel/plugin-proposal-decorators" с опцией legacy, установленной в true. Есть еще одна функция декораторов TypeScript, о которой мы должны поговорить: emitDecoratorMetadata. TypeScript обычно стирает всю информацию о типе, чтобы она не существовала во время выполнения. emitDecoratorMetadata — это функция, которая сохраняет типы для классов и методов, к которым применен декоратор. Наличие типа во время выполнения позволяет нам делать всевозможные причудливые вещи, такие как внедрение зависимостей и сопоставление типов TypeScript с типами в базе данных SQL. Эта функция достаточно интенсивно используется в этих двух областях, с такими библиотеками, как TypeORM, TypeGoose, inversifyJS и даже системой внедрения зависимостей Angular, зависящей от этой функции. Поскольку Babel не заботится о информации о типе, для этой функции требуется пользовательский плагин babel-plugin-transform-typescript-metadata. Добавление этого плагина вместе с plugin-proposal-decorators, о которых мы упоминали ранее, должно обеспечить Babel паритет функций с TypeScript в отношении декораторов.

Babel превосходно справляется с пользовательскими преобразованиями

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

TypeScript и Babel имеют схожую производительность

Сравнивать Babel и TypeScript с точки зрения производительности сложно и, вероятно, не даст вам полной картины. TypeScript, выполняющий проверку типов, определенно будет медленнее, чем Babel, потому что в него включены дополнительные шаги. Чтобы достичь примерно одинаковой скорости, вы можете смягчить это замедление, используя что-то вроде fork-ts-checker-webpack-plugin, который запускает компиляцию без типов в одном процессе и проверку типов в фоновом процессе. Конечно, любой, кто пытался настроить Webpack, знает, что цепочки инструментов JavaScript кажутся чрезвычайно сложными. У вас есть плагины карты исходного кода, кэширование, выбор между количеством потоков, которые вы должны использовать — список можно продолжать. Ни один простой бенчмарк не может учесть всю картину, но если вы ожидаете многократного увеличения производительности при использовании Babel по сравнению с компилятором TypeScript, вам придется искать прирост производительности в другом месте.

Что выбрать: Babel или TypeScript?

На данный момент TypeScript и Babel примерно равны по роли, которую они могут играть в цепочке сборки. Babel теперь имеет полную поддержку const enums, декораторов и метаданных декораторов. Единственный недостаток использования Babel заключается в том, что вам нужно будет запускать проверку типов как отдельный процесс. Если у вас уже есть конвейер сборки, который вам подходит, я не вижу веских причин для перехода. Однако, если вы начинаете работу над проектом, я, вероятно, склоняюсь к использованию компилятора TypeScript, возможно, через что-то вроде ts-loader. Затем, если вы обнаружите, что вам нужно какое-то преобразование, предоставляемое только Babel, вы можете передать транспилированный вывод TypeScript в Babel. На мой вкус, это слишком сложно, но никто никогда не говорил, что набор инструментов для сборки JavaScript прост.

Frontend TypeScript

Как настроить Webpack, TypeScript и ts-loader

9 месяцев назад·8 мин. на чтение

Здесь вы узнаете, как правильно настроить Webpack с использованием TypeScript и ts-loader. Шаг за шагом мы проведем вас через процесс интеграции TypeScript в ваш проект с помощью ts-loader, расскажем об основных конфигурационных параметрах и поделимся советами по оптимизации сборки.

Используемый во многих современных проектах, Webpack, является инструментом, который оптимизирует ресурсы приложения, чтобы они работали более эффективно на любом устройстве. Webpack помогает компилировать и объединять модули в единый файл, уменьшая количество HTTP-запросов и, как следствие, повышая производительность приложения. С помощью Webpack код TypeScript компилируется в файл JavaScript, который удобен для браузера. С помощью загрузчиков (loaders) Webpack вы также можете конвертировать файлы Sass и Less в один CSS файл. В этой статье мы узнаем, как использовать Webpack для компиляции TypeScript в JavaScript, объединять исходный код в один JavaScript файл и использовать source map исходного кода для отладки. Мы также рассмотрим, как использовать плагины Webpack. Чтобы следовать инструкциям в этом руководстве, вам потребуется следующее:

npm
Node.js (≥v8.x)
Редактор кода на ваш выбор (например, Visual Studio Code)
Базовые знания TypeScript

Содержание

Загрузчики Webpack
Настройка Webpack и TypeScript
Конфигурация Webpack
Конфигурация TypeScript
Конфигурация пакета
Создание HTML-страниц с помощью HtmlWebpackPlugin
Объединение CSS с MiniCssExtractPlugin
Минимизация CSS
Минификация JavaScript
Использование CopyWebpackPlugin
Отладка с помощью source map

Загрузчики Webpack

По умолчанию Webpack понимает только файлы JavaScript, рассматривая каждый импортированный файл как модуль. Webpack не может компилировать или объединять файлы, отличные от JavaScript, поэтому он использует загрузчики. Загрузчики сообщают Webpack, как компилировать и объединять статические ресурсы. Они используются для компиляции модулей TypeScript в JavaScript, обработки стилей приложений и даже линтинга кода с помощью ESLint. Некоторые загрузчики Webpack включают ts-loader, css-loader, style-loader и другие. Мы обсудим их позже в этом руководстве.

Настройка Webpack и TypeScript

Начнем с настройки нашего проекта. Во-первых, на вашем компьютере должен быть установлен TypeScript. Чтобы установить TypeScript глобально, используйте следующую команду:

npm install -g typescript

Глобальная установка TypeScript избавляет от необходимости устанавливать TypeScript каждый раз, когда вы начинаете новый проект. Далее мы установим пакеты webpack и ts-loader в качестве зависимостей в нашем проекте:

npm init -y
npm install -D webpack webpack-cli ts-loader webpack-dev-server

Конфигурация Webpack

По умолчанию Webpack не нуждается в конфигурационном файле. Предполагается, что точкой входа для вашего проекта является src/index.js и выведет минимизированный и оптимизированный результат в dist/main.js. Если вы хотите использовать плагины или загрузчики, то вам нужно будет использовать конфигурационный файл Webpack, позволяющий указать, как Webpack будет работать с вашим проектом, какие файлы компилировать и где будет находиться выходной файл. Давайте добавим конфигурационный файл Webpack в наш проект. В корневой папке проекта создайте webpack.config.js со следующими конфигурациями:

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    static: path.join(__dirname, "dist"),
    compress: true,
    port: 4000,
  },
};

Давайте рассмотрим некоторые параметры конфигурации Webpack. Во-первых, опция entry является отправной точкой для приложения, где Webpack начинает строить граф зависимостей. Webpack перейдет к другим модулям в зависимости от входного файла. Опция output указывает Webpack, куда сохранять бандлы (результаты сборки), и позволяет присвоить файлу имя. Наконец, опция module указывает Webpack, как обрабатывать модули с определенными правилами с помощью загрузчиков.

Конфигурация TypeScript

Конфигурационный файл TypeScript определяет, как TypeScript будет компилироваться в JavaScript, и определяет различные параметры компилятора, необходимые для транспиляции TypeScript. В корневой папке проекта создайте tsconfig.json и добавьте следующие конфигурации:

{
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "ES5",
        "module": "ES2015"
    }
}

target — это версия JavaScript, в которую вы хотите транспилировать TypeScript, а module — это формат используемого оператора импорта. Вы можете установить модуль на CommonJS, ES6 или UMD, так как Webpack будет работать со всеми системами модулей.

Конфигурация проекта

Теперь нам нужно добавить сценарий Webpack, который будет запускать webpack.config.js файл для нас. Чтобы добавить сценарий Webpack, откройте package.json и добавьте следующие скрипты в опцию script:

"dev": "webpack-dev-server --mode development",
"build" : "webpack --mode production"

Файл package.json теперь будет содержать следующие параметры конфигурации:

{
  "name": "webpack-setup",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.1",
    "ts-loader": "^9.4.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }
}

Теперь давайте создадим простую программу TypeScript, которая будет вычитать два числа. Внутри папки src создайте index.ts и добавьте следующий код TypeScript:

import { subtract } from "./app";

function init() {
    const form = document.querySelector("form");
    form?.addEventListener("submit", submitHandler);
}

function submitHandler(e: Event) {
    e.preventDefault();
    const num1 = document.querySelector("input[name='firstnumber']") as HTMLInputElement;
    const num2 = document.querySelector("input[name='secondnumber']") as HTMLInputElement;
    const result = subtract(Number(num1.value), Number(num2.value));
    const resultElement = document.querySelector("p");
    if (resultElement) {
      resultElement.textContent = result.toString();
    }
}

init();

Затем создайте еще один файл app.ts и добавьте следующий код:

export function subtract(firstnumber: number, secondnumber: number): number {
  return firstnumber - secondnumber;
}

Запуск скрипта dev запустит приложение в режиме разработки:

npm run develop

Запуск скрипта build запустит приложение в режиме для продакшен сборки:

npm run build

После выполнения команды build Webpack транспилирует два файла TypeScript в код JavaScript и сгенерирует bundle.js в папке dist.

Создание HTML-страниц с помощью HtmlWebpackPlugin

HtmlWebpackPlugin позволяет Webpack генерировать стандартную HTML-страницу, которая будет обслуживать сгенерированные файлы пакета. Когда имя файла пакета изменяется или хэшируется, HTMLWebpackPlugin обновляет имена файлов на HTML-странице. Во-первых, чтобы установить HtmlWebpackPlugin, выполните следующую команду:

npm install html-webpack-plugin --save-dev

Далее нам нужно импортировать и добавить HtmlWebpackPlugin в опцию плагина конфигурации Webpack следующим образом:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      }
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
        title: 'our project', 
        template: 'src/custom.html' }) 
  ],
  devServer: {
    static: path.join(__dirname, "dist"),
    compress: true,
    port: 4000,
  },
};

Шаблон представляет собой пользовательский HTML-файл, сгенерированный HtmlWebpackPlugin для вставки в HTML-страницу. Чтобы создать пользовательский HTML-код, внутри папки src создайте custom.html и добавьте следующий HTML-код:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="cal">
      <center>
     <form><br>
      <p>Result : <span id="display"></span></p>
      <input type="number" class="input" placeholder="Enter first number" name="firstnumber" value="1" min="1" min="9" /><br>
      <input type="number" class="input" placeholder="Enter second number" name="secondnumber" value="1" min="1" min="9" /><br><br>
      <button type="submit" class="button">Subtract</button>
    </form>
  </center>
  </div>
  </body>
</html>

Вам не нужно включать скрипт или теги ссылок в пользовательский HTML. HtmlWebpackPlugin позаботится об этом, связав URL-адрес файла пакета со сгенерированной страницей. При запуске приложения в продакшен режиме файл index.html появится внутри папки dist.

Собираем CSS с MiniCSSExtractPlugin

css-loader подсказывает Webpack, как работать с CSS. Он интерпретирует @import и URL как import/require и резолвит их. css-loader позволяет Webpack скомпилировать все CSS файлы и конвертировать их в формат JavaScript. Объединение CSS-файлов с загрузчиком стилей приводит к тому, что стили HTML-страниц не отвечают на запросы до тех пор, пока bundle.js полностью не загружен. Загрузчик стилей внедряет CSS в DOM, но собранный JavaScript файл должен быть полностью загружен до внедрения стилей. Чтобы решить эту проблему, мы можем использовать MiniCssExtractPlugin. MiniCssExtractPlugin извлекает файлы CSS и объединяет их в один bundle.css файл. Это полезно для уменьшения размера ресурсов CSS и помогает избежать ненужных HTTP-запросов для их загрузки. Мы можем установить css-loader и MiniCssExtractPlugin, выполнив в терминале следующие команды:

npm install css-loader --save-dev
npm install mini-css-extract-plugin --save-dev

Теперь давайте добавим css-loader и MiniCssExtractPlugin в webpack.config.js файл. В верхней части webpack.config.js импортируйте модуль MiniCssExtractPlugin, используя приведенный ниже код:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

Затем мы добавим новое правило в свойство rules следующим образом:

…
{
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
}
…

Когда css-loader компилирует все CSS файлы в JavaScript, MiniCssExtractPlugin.loader загружает CSS в CSS бандл. Далее мы добавим MiniCssExtractPlugin в опцию плагина следующим образом:

plugins: [
  new HtmlWebpackPlugin({
    title: 'our project',
    template: 'src/custom.html'
  }),
  new MiniCssExtractPlugin({
    filename:"bundle.css"
  })
]

Теперь, когда мы настроили css-loader и MiniCssExtractPlugin, давайте создадим CSS-файл и импортируем его в index.ts. Внутри папки src создайте index.css и добавьте следующий CSS-код:

form {
    background-color: pink;
    margin-top: 100px;
    border-radius: 40px;
}
.cal {
    width: 550px;
    height: 300px;
    margin-left: 400px;
}
.button {
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.input {
    border-radius: 10px;
    margin-top: 40px;
}

Импортируйте CSS-стиль в index.ts следующим образом:

import styles "./main.css"

Запуск npm run build объединит CSS и применит его к index.html. Когда вы запускаете приложение в режиме разработки и открываете http://localhost:4000.

Минимизация CSS

Мы можем использовать css-minimizer-webpack-plugin, чтобы уменьшить размер файлов CSS, удалив неиспользуемые правила CSS и оставив только необходимые. css-minimizer-webpack-plugin находит все неиспользуемые стили. Затем этот плагин удалит эти неиспользуемые стили из вашего окончательного файла CSS, тем самым уменьшив его размер. Выполните приведенную ниже команду установки, чтобы установить css-minimizer-webpack-plugin:

npm install css-minimizer-webpack-plugin --save-dev

Добавим css-minimizer-webpack-plugin в конфигурацию Webpack. Во-первых, импортируйте плагин следующим образом:

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

Затем мы добавим новое свойство optimization в конфигурацию Webpack следующим образом:

optimization: {
  minimizer: [
    new CssMinimizerPlugin()
  ],
}

Когда мы запускаем команду npm run build, bundle.css будет минифицироваться, но bundle.js не будет. Стандартная минификация для bundle.js была переопределена параметром minimizer, который мы установили. Чтобы решить эту проблему, нам нужно минифицировать JavaScript с помощью TerserWebpackPlugin.

Минификация JavaScript

В текущей версии Webpack (на момент написания статьи 5.74.0) и более поздних, вам не нужно устанавливать TerserWebpackPlugin, так как он включен из коробки. Во-первых, мы должны импортировать TerserWebpackPlugin:

const TerserPlugin = require("terser-webpack-plugin");

Затем добавьте TerserPlugin в опцию минимизации следующим образом:

optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin()
    ],
  }

Если вы запустите скрипт npm run build и посмотрите на файлы в папке dist, вы увидите, что и JavaScript, и CSS минифицированы.

Использование CopyWebpackPlugin

Мы можем настроить Webpack для копирования ресурсов приложения из папки c исходными файлами в папку сборки dist с помощью CopyWebpackPlugin. Этот плагин может копировать такие файлы, как изображения, видео и другие ресурсы, в папку dist. Установите CopyWebpackPlugin с помощью следующей команды:

npm install copy-webpack-plugin --save-dev

Теперь добавим CopyWebpackPlugin в конфигурацию Webpack. Импортируйте плагин следующим образом:

const CopyPlugin = require("copy-webpack-plugin");

Далее мы добавим CopyWebpackPlugin в опцию плагина. Свойство from — это папка, из которой мы будем копировать, а to — это папка в каталоге dist, в которую нужно скопировать все файлы:

// ...
plugins: [
  new HtmlWebpackPlugin({
    title: 'our project',
    template: 'src/custom.html'
  }),
  new MiniCssExtractPlugin({
    filename: "bundle.css"
  }),
  new CopyPlugin({
    patterns: [
      { from: "src/img", to: "img" }
    ]
  }),
]
// ...

Создайте новую папку img и добавьте в нее изображения. После выполнения команды npm run build образы будут скопированы в dist/img.

Отладка с помощью source map

Когда мы собираем пакет путем компиляции файлов TypeScript в файлы JavaScript (npm run build), нам может потребоваться отладить и протестировать код с помощью DevTools нашего браузера. При отладке кода инструментам разработки браузера вы заметите, что отображаются только собранные файлы. Всякий раз, когда в нашем коде TypeScript есть ошибка, она будет указана только в собранном файле, что затрудняет отслеживание ошибок в TypeScript для исправления. Тем не менее, с source map кода мы можем легко отлаживать TypeScript с помощью DevTools. Source map кода отображают исходный файл, что упрощает отладку TypeScript и исправление кода и минимизированного кода JavaScript. Файлы .map содержат сведения как об исходных файлах, так и о собранных файлах. DevTools использует этот файл для сопоставления исходного файла с собранным файлом. Чтобы сгенерировать .map для файлов пакета, нам нужно настроить как Webpack, так и TypeScript. В конфигурационном файле TypeScript добавьте sourceMap к параметру компилятора и присвойте ему значение true:

{
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "ES5",
        "module": "ES2015",
        "sourceMap": true
    }
}

Далее мы добавим свойство devtool в конфигурацию Webpack и установим его в true, указав Webpack сгенерировать соответствующую карту исходного кода для каждого собранного файла:

module.exports = {
  devtool: 'source-map',
  // ...
}

Выполнив команду npm run build, вы сможете отлаживать исходный код напрямую.

Итоги

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

Frontend Webpack TypeScript