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

20 советов для улучшения качества кода в React проекте

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

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

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

1. Используйте короткую запись JSX

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

Плохо

return (
  <Navbar showTitle={true} />
);

Хорошо

return(
  <Navbar showTitle />  
)

2. Используйте тернарные операторы

Допустим, вы хотите отобразить сведения о пользователе в зависимости от роли.

Плохо

const { role } = user;

if(role === ADMIN) {
  return <AdminUser />
}else{
  return <NormalUser />
}

Хорошо

const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />

3. Воспользуйтесь преимуществами объектных литералов

Объектные литералы могут помочь сделать наш код более читабельным. Допустим, вы хотите отобразить три типа пользователей в зависимости от их ролей. Вы не можете использовать тернарный оператор, так как количество опций превышает два.

Плохо

const {role} = user

switch(role){
  case ADMIN:
    return <AdminUser />
  case EMPLOYEE:
    return <EmployeeUser />
  case USER:
    return <NormalUser />
}

Хорошо

const {role} = user

const components = {
  ADMIN: AdminUser,
  EMPLOYEE: EmployeeUser,
  USER: NormalUser
};

const Component = components[role];

return <Componenent />;

Теперь код выглядит намного лучше.

4. Используйте фрагменты

Всегда используйте Fragment вместо лишней обертки div. Это сохраняет код чистым, а также полезно для производительности, поскольку в виртуальной модели DOM создается на один узел меньше.

Плохо

return (
  <div>
     <Component1 />
     <Component2 />
     <Component3 />
  </div>  
)

Хорошо

return (
  <>
     <Component1 />
     <Component2 />
     <Component3 />
  </>  
)

5. Не определяйте функцию внутри рендеринга

Не определяйте функцию внутри функции рендеринга. Постарайтесь свести логику рендеринга к абсолютному минимуму.

Плохо

return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>    // здесь определена функция
      This is a bad example 
    </button>  
)

Хорошо

const submitData = () => dispatch(ACTION_TO_SEND_DATA)

return (
  <button onClick={submitData}>  
    This is a good example 
  </button>  
)

6. Используйте React memo

React.PureComponent и Memo могут значительно повысить производительность вашего приложения. Они помогают нам избежать ненужного рендеринга.

Плохо

import React, { useState } from "react";

export const TestMemo = () => {
  const [userName, setUserName] = useState("faisal");
  const [count, setCount] = useState(0);

  const increment = () => setCount((count) => count + 1);

  return (
    <>
      <ChildrenComponent userName={userName} />
      <button onClick={increment}> Increment </button>
    </>
  );
};

const ChildrenComponent =({ userName }) => {
  console.log("rendered", userName);
  return <div> {userName} </div>;
};

Хотя дочерний компонент должен отображаться только один раз, так как значение count не имеет ничего общего с ChildComponent. Но он отображается рендерится каждый раз, когда вы нажимаете на кнопку.

Хорошо

Давайте отредактируем ChildrenComponent следующим образом:

import React, {useState} from "react";

const ChildrenComponent = React.memo(({userName}) => {
    console.log('rendered')
    return <div> {userName}</div>
})

Теперь, независимо от того, сколько раз вы нажмете на кнопку, она будет отображаться только тогда, когда это необходимо.

7. Поместите CSS в JavaScript

Избегайте сырого JavaScript при написании приложений React, потому что организовать CSS намного сложнее, чем организовать JS.

Плохо

// CSS FILE

.body {
  height: 10px;
}

//JSX

return <div className='body'>

</div>

Хорошо

const bodyStyle = {
  height: "10px"
}

return <div style={bodyStyle}>

</div>

8. Используйте деструктурирование объектов

Используйте деструктурирование объектов в своих интересах. Допустим, вам нужно показать данные пользователя.

Плохо

return (
  <>
    <div> {user.name} </div>
    <div> {user.age} </div>
    <div> {user.profession} </div>
  </>  
)

Хорошо

const { name, age, profession } = user;

return (
  <>
    <div> {name} </div>
    <div> {age} </div>
    <div> {profession} </div>
  </>  
)

9. Строковые пропсы можно передавать без фигурных скобок

При передаче строковых пропсов дочернему компоненту.

Плохо

return(
  <Navbar title={"My Special App"} />
)

Хорошо

return(
  <Navbar title="My Special App" />  
)

10. Удалить JS-код из JSX

Вынесите JS-код из JSX, если это не служит какой-либо цели рендеринга или функциональности пользовательского интерфейса.

Плохо

return (
  <ul>
    {posts.map((post) => (
      <li onClick={event => {
        console.log(event.target, 'clicked!'); // <- плохо
        }} key={post.id}>{post.title}
      </li>
    ))}
  </ul>
);

Хорошо

const onClickHandler = (event) => {
   console.log(event.target, 'clicked!'); 
}

return (
  <ul>
    {posts.map((post) => (
      <li onClick={onClickHandler} key={post.id}>{post.title}</li>
    ))}
  </ul>
);

11. Используйте шаблонные литералы

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

Плохо

const userDetails = user.name + "'s profession is" + user.proffession

return (
  <div> {userDetails} </div>  
)

Хорошо

const userDetails = `${user.name}'s profession is ${user.proffession}`

return (
  <div> {userDetails} </div>  
)

12. Порядок импортов

Всегда старайтесь импортировать сущности в определенном порядке. Это улучшает читаемость кода.

Плохо

import React from 'react';
import ErrorImg from '../../assets/images/error.png';
import styled from 'styled-components/native';
import colors from '../../styles/colors';
import { PropTypes } from 'prop-types';

Хорошо

Эмпирическое правило состоит в том, чтобы сохранить порядок импорта следующим образом:

Встроенные зависимости
Внешние зависимости
Внутренние зависимости

Итак, приведенный выше пример становится:

import React from 'react';

import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';

import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';

13. Используйте неявный возврат

Используйте функцию JavaScript с неявным возвратом результата при написании красивого кода. Допустим, ваша функция выполняет простое вычисление и возвращает результат.

Плохо

const add = (a, b) => {
  return a + b;
}

Хорошо

const add = (a, b) => a + b;

14. Именование компонентов

Всегда используйте PascalCase для компонентов и camelCase для экземпляров.

Плохо

import reservationCard from './ReservationCard';

const ReservationItem = <ReservationCard />;

Хорошо

import ReservationCard from './ReservationCard';

const reservationItem = <ReservationCard />;

15. Кавычки

Используйте двойные кавычки для атрибутов JSX и одинарные кавычки для всех остальных JS.

Плохо

<Foo bar='bar' />

<Foo style={{ left: "20px" }} />

Хорошо

<Foo bar="bar" />

<Foo style={{ left: '20px' }} />

16. Именование пропсов

Всегда используйте camelCase для имен объектов или PascalCase, если значение объекта является компонентом React.

Плохо

<Component
  UserName="hello"
  phone_number={12345678}
/>

Хорошо

<MyComponent
  userName="hello"
  phoneNumber={12345678}
  Component={SomeComponent}
/>

17. JSX в круглых скобках

Если компонент занимает более одной строки, всегда заключайте его в круглые скобки.

Плохо

return <MyComponent variant="long">
           <MyChild />
         </MyComponent>;

Хорошо

return (
    <MyComponent variant="long">
      <MyChild />
    </MyComponent>
);

18. Самозакрывающиеся теги

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

Плохо

<SomeComponent variant="stuff"></SomeComponent>

Хорошо

<SomeComponent variant="stuff" />

19. Нижнее подчеркивание в названии метода

Не используйте символы подчеркивания ни в одном внутреннем методе React.

Плохо

const _onClickHandler = () => {
  // код
}

Хорошо

const onClickHandler = () => {
  // код
}

20. Проп `alt`

Всегда включайте проп alt в теги <img >. И не используйте picture или image в проп alt, потому что программы чтения с экрана уже объявляют элементы img изображениями.

Плохо

<img src="hello.jpg" />

<img src="hello.jpg" alt="Picture of me rowing a boat" />

Хорошо

<img src="hello.jpg" alt="Me waving hello" />

Frontend React

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

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

20 советов для улучшения качества кода в React проекте

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

1. Используйте короткую запись JSX

Плохо

Хорошо

2. Используйте тернарные операторы

Плохо

Хорошо

3. Воспользуйтесь преимуществами объектных литералов

Плохо

Хорошо

4. Используйте фрагменты

Плохо

Хорошо

5. Не определяйте функцию внутри рендеринга

Плохо

Хорошо

6. Используйте React memo

Плохо

Хорошо

7. Поместите CSS в JavaScript

Плохо

Хорошо

8. Используйте деструктурирование объектов

Плохо

Хорошо

9. Строковые пропсы можно передавать без фигурных скобок

Плохо

Хорошо

10. Удалить JS-код из JSX

Плохо

Хорошо

11. Используйте шаблонные литералы

Плохо

Хорошо

12. Порядок импортов

Плохо

Хорошо

13. Используйте неявный возврат

Плохо

Хорошо

14. Именование компонентов

Плохо

Хорошо

15. Кавычки

Плохо

Хорошо

16. Именование пропсов

Плохо

Хорошо

17. JSX в круглых скобках

Плохо

Хорошо

18. Самозакрывающиеся теги

Плохо

Хорошо

19. Нижнее подчеркивание в названии метода

Плохо

Хорошо

20. Проп alt

Плохо

Хорошо

Содержание

Загрузчики Webpack

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

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

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

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

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

Собираем CSS с MiniCSSExtractPlugin

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

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

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

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

Итоги

20. Проп `alt`