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

Продвинутые стратегии при работе с React и TypeScript

2 года назад·10 мин. на чтение

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

React и TypeScript являются двумя наиболее популярными технологиями, используемыми в современной веб-разработке. Компонентная архитектура React и виртуальный DOM в сочетании с мощной типизацией и удобством сопровождения TypeScript создают мощный дуэт.

Архитектура

Хорошо спроектированная архитектура необходима для создания масштабируемых, поддерживаемых и расширяемых приложений. Продуманная архитектурная стратегия может гарантировать, что ваше приложение остается управляемым по мере его роста и развития с течением времени. Существует несколько архитектурных шаблонов, доступных для приложений React, таких как Flux, Redux и Context API. Каждый шаблон имеет свои сильные и слабые стороны, и выбор будет зависеть от требований вашего приложения и предпочтений вашей команды. При создании приложения TypeScript важно выбрать архитектуру, которая хорошо работает с дополнительным уровнем сложности TypeScript. Многоуровневая архитектура, такая как Domain-Driven Design, может помочь управлять сложностью и обеспечивать разделение задач. Кроме того, модульная архитектура, такая как Micro Frontends, может помочь разбить большие приложения на более мелкие, более управляемые части. Другая архитектурная стратегия заключается в использовании компонентов-контейнеров и презентационных компонентов. Компоненты-контейнеры отвечают за управление состоянием приложения и потоком данных, в то время как презентационные компоненты связаны с отображением пользовательского интерфейса. Такой подход помогает обеспечить разделение задач и упорядочить кодовую базу.

Давайте подробнее рассмотрим пример архитектуры приложения React и TypeScript.

// App.tsx
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound';

function App() {
  return (
    <Provider store={store}>
      <Router>
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route exact path="/contact" component={Contact} />
          <Route component={NotFound} />
        </Switch>
        <Footer />
      </Router>
    </Provider>
  );
}
export default App;

В этом примере архитектуры у нас есть компонент контейнера App, который управляет состоянием приложения и потоком данных. Мы используем React Router для управления маршрутизацией приложения и рендеринга различных страниц на основе URL- адреса. Компонент контейнера также заключает все приложение в Provider Redux, который предоставляет доступ к глобальному состоянию приложения. Презентационные компоненты, Header и Footer, связаны с отображением пользовательского интерфейса и получением пропса от компонента контейнера.

Тестирование

Тестирование имеет решающее значение для обеспечения того, чтобы ваш код работал так, как задумано, выявляя ошибки до того, как они попадут в продакшен. Эффективное тестирование требует комплексной стратегии, охватывающей все аспекты приложения, от модульных тестов до интеграционных тестов и end-to-end тестов. Существует несколько фреймворков тестирования и инструментов, доступных для React и TypeScript, таких как Jest, Enzyme и React Testing Library. При тестировании приложений TypeScript важно убедиться, что тесты правильно типизируют код и обнаруживают ошибки, связанные с типами. Модульные тесты должны быть написаны для охвата отдельных функций или компонентов, в то время как интеграционные тесты должны проверять, как различные части приложения работают вместе. End-to-end (e2e) тесты должны имитировать реальные пользовательские сценарии и охватывать все аспекты приложения. Давайте подробнее рассмотрим пример стратегии тестирования для приложения React и TypeScript.

// Example.test.tsx

import React from 'react';
import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import store from './store';
import Example from './Example';

describe('Example component', () => {
  it('renders correctly', () => {
    render(
      <Provider store={store}>
        <Example />
      </Provider>
    );
    const linkElement = screen.getByText(/Example Component/i);
    expect(linkElement).toBeInTheDocument();
  });
});

В этом примере стратегии тестирования мы используем платформы Jest и React Testing Library для написания модульного теста для компонента Example. Компонент заключен в провайдер Redux Provider, который предоставляет доступ к глобальному состоянию приложения. Функция render используется для рендеринга компонента и предоставления его для тестирования. screen - объект из библиотеки React Testing Library используется для поиска элемента с текстом Example Component. Наконец, функция expect используется для обеспечения того, чтобы элемент находился в документе.

Производительность

Производительность имеет решающее значение для обеспечения быстрого и отзывчивого взаимодействия с пользователем, особенно для более крупных и сложных приложений. Оптимизация производительности должна быть включена в вашу стратегию развития с самого начала. Для React и TypeScript доступно несколько методов оптимизации производительности, таких как отложенная загрузка (ленивая загрузка, lazy loading), разделение кода и мемоизация. При оптимизации производительности приложения TypeScript важно убедиться, что TypeScript используется эффективным и оптимизированным образом. Кроме того, следует проводить регулярное тестирование производительности и профилирование, чтобы убедиться, что оптимизация повышает производительность. Давайте подробнее рассмотрим пример метода оптимизации производительности для приложений React и TypeScript.

// LazyLoadedComponent.tsx

import React, { lazy, Suspense } from 'react';

const LazyLoadedComponent = lazy(() => import('./LazyLoadedComponentImpl'));
function LazyLoadedComponentWrapper() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyLoadedComponent />
    </Suspense>
  );
}
export default LazyLoadedComponentWrapper;

В этом примере метода оптимизации производительности мы используем функцию React lazy для ленивой загрузки компонента. Функция lazy принимает функцию, которая возвращает динамический импорт, позволяя загружать компонент только при необходимости. Компонент Suspense используется для предоставления резервного пользовательского интерфейса во время загрузки компонента. Этот метод может помочь улучшить начальное время загрузки приложения за счет уменьшения объема кода, который необходимо загрузить и проанализировать.

Процесс разработки

Эффективный и оптимизированный процесс разработки может помочь вам писать лучший код быстрее и эффективнее. Такие инструменты, как webpack, Babel и ESLint, могут помочь оптимизировать процесс разработки, а системы управления версиями, такие как Git, могут помочь управлять кодом и эффективно взаимодействовать с вашей командой. Гибкие методологии разработки, такие как Scrum, могут помочь оптимизировать процесс разработки, способствовать сотрудничеству и общению, а также более эффективно предоставлять высококачественное программное обеспечение. Регулярные проверки кода и сеансы обмена знаниями также могут помочь поддерживать качество кода и гарантировать, что все члены команды будут в курсе последних разработок. Другим аспектом оптимизированного процесса разработки является автоматизация. Автоматизация повторяющихся задач, таких как построение и развертывание приложения, может помочь сэкономить время и уменьшить количество ошибок. Конвейеры непрерывной интеграции и непрерывной доставки (CI/CD) помогают автоматизировать процесс разработки, позволяя сосредоточиться на написании кода и предоставлении функций.

Давайте подробнее рассмотрим пример процесса разработки для приложения React и TypeScript.

// package.json
{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack -mode production",
    "test": "jest",
    "lint": "eslint src",
    "precommit": "lint-staged",
    "deploy": "npm run build && aws s3 sync dist s3://my-bucket -delete"
  },
  "devDependencies": {
    "webpack": "5.64.4",
    "webpack-cli": "4.9.1",
    "webpack-dev-server": "4.6.0",
    "babel-loader": "8.2.3",
    "@babel/core": "7.16.7",
    "@babel/preset-env": "7.16.8",
    "@babel/preset-react": "7.16.7",
    "@babel/preset-typescript": "7.16.7",
    "eslint": "8.6.0",
    "eslint-plugin-react": "7.29.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "jest": "27.4.3",
    "ts-jest": "27.0.5",
    "lint-staged": "12.2.4",
    "husky": "7.0.4"
  },
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-redux": "7.2.6",
    "react-router-dom": "6.2.1",
    "redux": "4.1.2",
    "axios": "0.24.0"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "git add"
    ]
  }
}

В этом примере процесса разработки мы используем webpack для объединения нашего кода и Babel для преобразования нашего кода TypeScript в JavaScript. Мы используем Jest для выполнения наших тестов и ESLint для линтинга нашего кода. Скрипт precommit использует lint-staged для запуска ESLint и форматирования нашего кода перед каждым коммитом. Наконец, скрипт deploy создает наше приложение и развертывает его в бакете AWS S3.

Специальные возможности и доступность (Accessibility)

Специальные возможности имеют решающее значение для обеспечения того, чтобы все пользователи, независимо от их возможностей, могли получить доступ к приложению и использовать его. Следует следовать рекомендациям и стандартам по специальным возможностям, таким как Руководство по доступности веб (WCAG), чтобы обеспечить доступность приложения для всех. При разработке приложений React и TypeScript специальные возможности должны быть включены в процесс разработки с самого начала. Такие инструменты, как axe-core, можно использовать для проверки проблем со специальными возможностями и обеспечения соответствия приложения рекомендациям по специальным возможностям. Кроме того, использование семантического HTML и предоставление альтернативного текста для изображений может помочь улучшить специальные возможности вашего приложения. Давайте подробнее рассмотрим пример метода специальных возможностей для приложения React и TypeScript.

// AccessibleButton.tsx

import React, { ButtonHTMLAttributes } from 'react';
interface AccessibleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  label: string;
}
function AccessibleButton({ label, ...rest }: AccessibleButtonProps) {
  return (
    <button aria-label={label} {...rest}>
      {label}
    </button>
  );
}
export default AccessibleButton;

В этом примере метода специальных возможностей мы используем атрибут aria-label для предоставления метки со специальными возможностями для кнопки. Компонент AccessibleButton принимает проп label и отображает кнопку с атрибутом aria-label. Такой подход гарантирует, что кнопка будет доступна всем пользователям, включая пользователей, использующих программы чтения с экрана.

Безопасность

Безопасность является еще одним важным аспектом продвинутой разработки React и TypeScript. Уязвимости безопасности могут иметь серьезные последствия, начиная от утечек данных и заканчивая простоями приложений. Существует несколько рекомендаций по безопасности, которые следует соблюдать при разработке приложений React и TypeScript, такие как методы безопасного кодирования, валидация ввода и использование HTTPS. При разработке приложений TypeScript важно убедиться, что ваш код написан с учетом безопасности. Распространенные уязвимости системы безопасности, такие как внедрение кода SQL и межсайтовые скрипты (XSS), можно предотвратить с помощью параметризованных запросов и санитизации пользовательского ввода. Кроме того, использование HTTPS может помочь обеспечить шифрование данных при передаче и предотвратить атаки типа man-in-the-middle.

Давайте подробнее рассмотрим пример техники безопасности для приложения React и TypeScript.

// SecureForm.tsx
import React, { useState } from 'react';
import axios from 'axios';

function SecureForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    try {
      await axios.post('/api/submit-form', { name, email });
      alert('Form submitted successfully!');
    } catch (error) {
      alert('Error submitting form. Please try again.');
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}
export default SecureForm;

В этом примере техники безопасности мы используем методы безопасного кодирования и проверки ввода для предотвращения уязвимостей безопасности. Функция handleSubmit очищает и проверяет введенные пользователем данные перед отправкой на сервер. Кроме того, форма отправляется с использованием безопасного протокола HTTPS, чтобы обеспечить шифрование данных при передаче.

Обслуживание и поддержка

Обслуживание большого и сложного приложения React и TypeScript может быть сложной задачей, требующей надежной стратегии обслуживания. Хорошая стратегия обслуживания должна включать регулярные проверки кода, рефакторинг и обновление зависимостей. Проверки кода необходимы для поддержания качества кода и обеспечения соответствия кода стандартам вашей команды. Рефакторинг может помочь улучшить структуру и удобство сопровождения кода, упрощая его изменение и обновление в будущем. Обновление зависимостей может помочь гарантировать, что приложение использует последние и наиболее безопасные версии сторонних библиотек и платформ. Давайте подробнее рассмотрим пример стратегии обслуживания приложений React и TypeScript.

// ExampleComponent.tsx

import React from 'react';
import PropTypes from 'prop-types';

interface ExampleComponentProps {
  text: string;
}
function ExampleComponent({ text }: ExampleComponentProps) {
  return <div>{text}</div>;
}
ExampleComponent.propTypes = {
  text: PropTypes.string.isRequired,
};
export default ExampleComponent;

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

Создание и поддержка продвинутых приложений React и TypeScript требует надежной стратегии. Хорошо продуманная архитектура, комплексное тестирование, оптимизация производительности, эффективный процесс разработки, доступность, безопасность и стратегия обслуживания — все это важные компоненты успешной стратегии развития. Следуя этим стратегиям, вы можете гарантировать, что ваше приложение является масштабируемым, обслуживаемым и эффективным, обеспечивая высококачественный пользовательский интерфейс для ваших пользователей. В дополнение к стратегиям, рассмотренным выше, существует множество других продвинутых методов и шаблонов React и TypeScript, которые могут помочь вам создавать лучшие приложения. Некоторые примеры этих методов включают компоненты высшего порядка, render props и контекст. Компоненты высшего порядка (HOC) являются популярным шаблоном в React, который может помочь вам повторно использовать и совместно использовать логику между компонентами. HOC — это функции, которые принимают компонент и возвращают новый компонент с дополнительной функциональностью. Например, можно использовать HOC для добавления проверки подлинности или авторизации компонента. renderProps — еще один популярный шаблон в React, который может помочь вам повторно использовать логику между компонентами. Render props — это функции, которые передаются компоненту в качестве пропса, позволяя компоненту отображать динамическое содержимое. Например, можно использовать рендер проп для рендеринга загружаемого спиннера во время извлечения данных. Контекст — это функциональность в React, которая позволяет передавать данные через дерево компонентов без необходимости вручную передавать проп на каждом уровне. Контекст может быть полезен для передачи данных, таких как тема или предпочитаемый язык, компонентам, которые находятся глубоко в дереве компонентов.

Давайте подробнее рассмотрим пример реализации каждого из этих передовых методов.

// withAuthentication.tsx
import React, { ComponentType } from 'react';

function withAuthentication<T>(WrappedComponent: ComponentType<T>) {
  return function WithAuthentication(props: T) {
    const isAuthenticated = true; // replace with actual authentication logic
    return isAuthenticated ? (
      <WrappedComponent {...props} />
    ) : (
      <div>You must be logged in to view this content.</div>
    );
  };
}
export default withAuthentication;

В этом примере реализации HOC мы используем функцию withAuthentication для добавления проверки подлинности к компоненту. Функция withAuthentication принимает компонент и возвращает новый компонент с дополнительной логикой проверки подлинности. Новый компонент отображает упакованный компонент, если пользователь прошел проверку подлинности, или сообщение о том, что пользователь должен войти в систему в противном случае.

// FetchData.tsx

import React, { useState, useEffect } from 'react';

interface FetchDataProps {
  url: string;
  render: (data: any) => React.ReactNode;
}
function FetchData({ url, render }: FetchDataProps) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  useEffect(() => {
    setIsLoading(true);
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setIsLoading(false);
      })
      .catch((error) => {
        setError(error);
        setIsLoading(false);
      });
  }, [url]);
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>{error.message}</div>;
  }
  return <>{render(data)}</>;
}
export default FetchData;

В этом примере реализации рендер пропса мы используем компонент FetchData для извлечения данных из API и их рендеринга с помощью рендер пропса. Компонент FetchData принимает url, который указывает конечную точку API для извлечения, и render prop который является функцией, которая принимает извлеченные данные и возвращает JSX для рендеринга.

// ThemeContext.tsx
import React from 'react';

export const ThemeContext = React.createContext('light');
export const ThemeProvider = ({ children }: { children: React.ReactNode }) => (
  <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
);

В этом примере реализации контекста мы используем ThemeContext для предоставления темы нашему приложению. ThemeContext создается с помощью функции createContext, которая создает новый объект контекста. Компонент ThemeProvider используется для предоставления ThemeContext нашему приложению. ThemeProvider принимает проп children, который представляет собой дерево компонентов, которое должно быть обернуто контекстом темы.

В дополнение к этим передовым методам существует множество других инструментов и библиотек, которые могут помочь вам создавать лучшие приложения React и TypeScript. Вот некоторые примеры этих инструментов:

Redux: предсказуемый контейнер состояния для JavaScript приложений.
React Router: библиотека для маршрутизации в приложениях React.
Styled Components: библиотека для стилизации компонентов React с помощью CSS-in-JS.
Formik: библиотека для построения форм в React.
Storybook: инструмент для изолированного построения компонентов пользовательского интерфейса.

Используя эти средства и следуя передовым методам и стратегиям React и TypeScript, вы можете создавать лучшие, более масштабируемые и более удобные в обслуживании приложения.

Итоги

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

Архитектура и состав компонентов
Комплексное тестирование
Оптимизация производительности
Эффективный процесс разработки
Доступность
Безопасность
Поддержка

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

Frontend React TypeScript

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

8 месяцев назад·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