Архитектура современного React приложения
2 года назад·6 мин. на чтение
Есть одна проблема, с которой сталкивается каждый React-разработчик на своем пути. Это то, как построить хорошую архитектуру приложения, какая структура приложения будет идеальной.
Эта статья поможет вам избежать некоторых распространенных ошибок, которые большинство разработчиков допускают при создании архитектуры приложений на реакте, и подскажет вам правильный способ структурирования директорий.
Прежде чем начать, необходимо подчеркнуть один момент: не существует идеального решения, которое подходит для любого возможного случая. Это особенно важно понимать, потому что многие разработчики всегда ищут единственное и неповторимое решение всех своих проблем.
Если вы попали сюда, это значит, что вы заинтересовались этой темой, так что пора начинать! Все содержимое, которое будет упоминаться, будет помещено в каталог
Обратите внимание, что это исключительный случай, если бы у нас была одна страница для аутентификации, нам не следовало бы помещать его в
Иначе обстоит дело со страницей
Вместо этого рассмотрите возможность использования каталога
src
, и каждая упомянутая новая папка будет располагаться относительно этой директории.
Компоненты
Что в первую очередь создает React-разработчик в проекте? React-приложения создаются с помощью компонентов. Существует много различных архитектур (некоторые очень хорошие, а другие ужасные) и есть весьма универсальный путь, который можно использовать в большинстве случаев, даже для небольших проектов. Вот как это выглядит:Ключевым моментом здесь является следующее: у нас есть папка├── components │ ├── common │ │ └── button │ │ ├── button.tsx │ │ ├── button.stories.tsx │ │ ├── button.spec.tsx │ │ └── index.ts │ └── signup-form │ ├── signup-form.tsx │ ├── signup-form.spec.tsx │ └── index.ts
components
, содержащая все компоненты, которые используются в приложении более одного раза, поэтому мы собираемся исключить все специфические компоненты из этой папки.
Почему? Просто потому, что смысл этой папки заключается в том, чтобы содержать логику многократного использования. Кнопка должна использоваться почти на каждой странице нашего приложения, поэтому и существует общая папка common
. Для компонента signup-form
происходит нечто иное. Почему?
Предположим, что у нас есть две разные страницы (подробнее об этом позже) для входа и регистрации, компонент signup-form
должен повторяться два раза, вот почему он помещен в папку components
.
components
.
Вы, наверное, также заметили, что каждый компонент помещен в соответствующую директорию с очень простым для понимания соглашением об именовании.
Это потому, что ваше приложение в конечном итоге может содержать более 1000 компонентов, и, если все они имеют тесты или файл storybook, это может легко превратиться в беспорядок. Давайте рассмотрим некоторые ключевые моменты этой папки:button ├── button.tsx ├── button.stories.tsx ├── button.spec.tsx └── index.ts
- Все файлы, связанные с этим компонентом, находятся в этой папке.
- Все экспортируемые модули помещаются в
index.ts
, чтобы избежать двойного имени в импорте. - Все файлы названы в kebab-case.
- Где находится компонент кнопки? -> В папке
button
. - Где находятся сторибуки для этой кнопки? -> В папке
button
. - Мне нужно найти тесты для этой кнопки, где я могу его найти? -> Очевидно, в папке
button
.
Страницы
Отдельной сущности для страниц в React не существует. Они тоже являются компонентами, состоящими из других компонентов. Но в отличие от других компонентов, обычно они очень строго привязаны (например, в определенный путь URL). Куда же их вставлять? Мы можем использовать каталогviews
(или pages
, если хотите), в который помещаются все эти вещи, например:
Дляviews ├── home.tsx ├── guestbook.tsx └── newsletter ├── index.ts ├── newsletter.tsx └── components └── newsletter-form ├── newsletter-form.tsx ├── newsletter-form.spec.tsx └── index.ts
home
и guestbook
все довольно просто, страница должна быть результатом композиции других компонентов, которые имеют соответствующие тесты, поэтому для них нет специального каталога.
newsletter
, на которой есть нечто специфическое, компонент newsletter-form
. В этом случае используется подход создания вложенной папки компонентов внутри папки страницы и действуем так же, как в обычной папке компонентов, используя те же правила.
Этот подход очень эффективен, поскольку позволяет разделить код на небольшие фрагменты, но при этом сохраняет хорошо организованную архитектуру. Компонент newsletter-form
не следует помещать в папку с общими components
, просто потому, что это единственное место, в котором он используется. Если приложение будет расти, и компонент будет использоваться в нескольких частях, ничто не помешает вам переместить его.
Еще один совет - сохранять согласованное имя между страницей и маршрутом, примерно так:
<Route path="/bookings"> <Route index element={<Bookings />} /> <Route path="create" element={<CreateBooking />} /> <Route path=":id" element={<ViewBooking />} /> <Route path=":id/edit" element={<EditBooking />} /> <Route path=":id/delete" element={<DeleteBooking />} /> </Route>
Лэйауты (Layouts, Макеты)
Лэйауты вообще не являются страницами, они больше похожи на компоненты, поэтому с ними можно обращаться так же, но лучше помещать их в папкуlayouts
, так понятнее, что в этом приложении есть n лэйаутов.
Вы можете заметить, что мы не называем ихlayouts ├── main.tsx └── auth.tsx
main-layout.tsx
, а просто main.tsx
, потому что, следуя этому шаблону, нам пришлось бы переименовать все компоненты, например, table-component.tsx
, что странно. Поэтому называем все компоненты без очевидного суффикса, задаваемого родительским каталогом, а если нужно подчеркнуть, что используется макет, всегда можно использовать псевдоним импорта.
import { Main as MainLayout } from "@/layouts/main.tsx";
Контексты, хуки и хранилища
Это довольно просто, и обычно, почти все разработчики придерживаются чего-то подобного:Опять же, для единообразия используется kebab-case для всех имен файлов, так что нам нужно беспокоиться о том, какие из них написаны заглавными буквами, а какие нет. Для тестовых файлов, из-за того, что пользовательских хуков немного, не обязательно создавать отдельную папку, но, если вы хотите быть очень строгими, вы можете сделать и это:hooks ├── use-users.ts └── use-click-outside.ts contexts ├── workbench.tsx └── authentication.tsx
hooks ├── use-users │ ├── use-users.ts │ ├── use-users.spec.ts │ └── index.ts └── use-click-outside.ts
Функции-помощники (хэлперы, helpers)
Сколько раз вы создавали красивую функциюformatCurrency
, не зная, куда ее положить? Папка helpers
придет вам на помощь.
Обычно сюда помещаются все файлы, которые используются для того, чтобы код выглядел лучше. Не важно, будет ли функция использоваться несколько раз или нет.
helpers ├── format-currency.ts ├── uc-first.ts └── pluck.ts
Константы
Существует много проектов, которые содержат константы в папкеutils
или helpers
, но лучше помещать их в отдельный файл, давая пользователю хороший обзор того, что используется в качестве константы в приложении. Чаще всего в эту папку помещаются только глобальные константы, поэтому не стоит помещать сюда константу QUERY_LIMIT
, если она используется только в одной функции для очень специфического случая.
Кроме того, можно хранить все константы в одном файле. Нет смысла разбивать каждую константу на отдельные файлы.constants └── index.ts
И использоваться они будут так:// @/constants/index.ts export const COMPLANY_EMAIL = "example@example.com";
import { COMPLANY_EMAIL } from "@/constants";
Стили
Просто поместите глобальные стили в папкуstyles
, и все готово.
А как насчет CSS для компонентов? Хороший вопрос. Помните папку компонентов, о которой мы говорили некоторое время назад? Так вот, вы можете добавить больше файлов в зависимости от ваших потребностей.styles ├── index.css ├── colors.css └── typography.css
Если вы используетеbutton ├── button.tsx ├── button.stories.tsx ├── button.styled.tsx ├── button.module.scss ├── button.spec.tsx └── index.ts
emotion
, styled-components
или просто CSS Modules, поместите их в папку конкретного компонента, чтобы все было оптимально упаковано.
Конфигурационные файлы
Есть ли у вашего приложения файлы конфигурации, такие как Dockerfiles, Fargate Task Definitions, webpack и т.д.? Папкаconfig
должна быть идеальным местом для них. Помещение их в соответствующую директорию позволяет избежать загрязнения корневого каталога не относящимися к делу файлами.
API
99% приложений react имеют хотя бы один вызов API к внешнему источнику данных (вашему бэкенду или какому-то публичному сервису), обычно эти операции выполняются в нескольких строках кода без особых сложностей, и именно поэтому, оптимальная их организация игнорируется. Рассмотрим этот код:Довольно просто, верно? Теперь представьте, что у вас есть эти 3 строки, распределенные по 10 компонентам, потому что вы часто используете именно этот адрес сервера. Надеюсь, вы не хотите выполнять поиск и замену всех URL в приложении, кроме того, если вы используете TypeScript, импортировать каждый раз тип ответа - это довольно повторяющееся действие.axios .get("https://api.service.com/bookings") .then((res) => setBookings(res.data)) .catch((err) => setError(err.message));
api
, который, прежде всего, содержит экземпляр клиента, используемого для вызовов, например, fetch
или axios
, а также файлы, содержащие декларации вызовов fetch
.
И пример файла users.ts:api ├── client.ts ├── users.ts └── bookings.ts
export type User = { id: string; firstName: string; lastName: string; email: string; }; export const fetchUsers = () => { return client.get<User[]>("/users", { baseURL: "https://api.service.com/v3/", }); };
Итоги
Это был долгий путь, и надеюсь, что информация в этой статье окажется полезной для вас при создании новых и существующих проектов. Еще многое предстоит сказать, всегда есть особые случаи, которые нужно принимать во внимание, но пункты, рассмотренные в этой статье, являются наиболее используемыми многими 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 глобально, используйте следующую команду:Глобальная установка TypeScript избавляет от необходимости устанавливать TypeScript каждый раз, когда вы начинаете новый проект. Далее мы установим пакеты webpack и ts-loader в качестве зависимостей в нашем проекте:npm install -g typescript
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
со следующими конфигурациями:
Давайте рассмотрим некоторые параметры конфигурации Webpack. Во-первых, опция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, }, };
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
теперь будет содержать следующие параметры конфигурации:
Теперь давайте создадим простую программу TypeScript, которая будет вычитать два числа. Внутри папки{ "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" } }
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
и добавьте следующий код:
Запуск скрипта dev запустит приложение в режиме разработки:export function subtract(firstnumber: number, secondnumber: number): number { return firstnumber - secondnumber; }
Запуск скрипта build запустит приложение в режиме для продакшен сборки:npm run develop
После выполнения команды build Webpack транспилирует два файла TypeScript в код JavaScript и сгенерируетnpm run build
bundle.js
в папке dist
.
Создание HTML-страниц с помощью HtmlWebpackPlugin
HtmlWebpackPlugin позволяет Webpack генерировать стандартную HTML-страницу, которая будет обслуживать сгенерированные файлы пакета. Когда имя файла пакета изменяется или хэшируется, HTMLWebpackPlugin обновляет имена файлов на HTML-странице. Во-первых, чтобы установить HtmlWebpackPlugin, выполните следующую команду:Далее нам нужно импортировать и добавить HtmlWebpackPlugin в опцию плагина конфигурации Webpack следующим образом:npm install html-webpack-plugin --save-dev
Шаблон представляет собой пользовательский HTML-файл, сгенерированный HtmlWebpackPlugin для вставки в HTML-страницу. Чтобы создать пользовательский HTML-код, внутри папки src создайте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, }, };
custom.html
и добавьте следующий HTML-код:
Вам не нужно включать скрипт или теги ссылок в пользовательский HTML. HtmlWebpackPlugin позаботится об этом, связав URL-адрес файла пакета со сгенерированной страницей. При запуске приложения в продакшен режиме файл<!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>
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, выполнив в терминале следующие команды:
Теперь давайте добавим css-loader и MiniCssExtractPlugin вnpm install css-loader --save-dev npm install mini-css-extract-plugin --save-dev
webpack.config.js
файл.
В верхней части webpack.config.js
импортируйте модуль MiniCssExtractPlugin, используя приведенный ниже код:
Затем мы добавим новое правило в свойство rules следующим образом:const MiniCssExtractPlugin = require("mini-css-extract-plugin");
Когда css-loader компилирует все CSS файлы в JavaScript, MiniCssExtractPlugin.loader загружает CSS в CSS бандл. Далее мы добавим MiniCssExtractPlugin в опцию плагина следующим образом:… { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] } …
Теперь, когда мы настроили css-loader и MiniCssExtractPlugin, давайте создадим CSS-файл и импортируем его вplugins: [ new HtmlWebpackPlugin({ title: 'our project', template: 'src/custom.html' }), new MiniCssExtractPlugin({ filename:"bundle.css" }) ]
index.ts
. Внутри папки src
создайте index.css
и добавьте следующий 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; }
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:Добавим css-minimizer-webpack-plugin в конфигурацию Webpack. Во-первых, импортируйте плагин следующим образом:npm install css-minimizer-webpack-plugin --save-dev
Затем мы добавим новое свойство optimization в конфигурацию Webpack следующим образом:const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
Когда мы запускаем командуoptimization: { minimizer: [ new CssMinimizerPlugin() ], }
npm run build
, bundle.css
будет минифицироваться, но bundle.js
не будет. Стандартная минификация для bundle.js
была переопределена параметром minimizer
, который мы установили. Чтобы решить эту проблему, нам нужно минифицировать JavaScript с помощью TerserWebpackPlugin.
Минификация JavaScript
В текущей версии Webpack (на момент написания статьи 5.74.0) и более поздних, вам не нужно устанавливать TerserWebpackPlugin, так как он включен из коробки. Во-первых, мы должны импортировать TerserWebpackPlugin:Затем добавьте TerserPlugin в опцию минимизации следующим образом:const TerserPlugin = require("terser-webpack-plugin");
Если вы запустите скриптoptimization: { minimizer: [ new CssMinimizerPlugin(), new TerserPlugin() ], }
npm run build
и посмотрите на файлы в папке dist, вы увидите, что и JavaScript, и CSS минифицированы.
Использование CopyWebpackPlugin
Мы можем настроить Webpack для копирования ресурсов приложения из папки c исходными файлами в папку сборки dist с помощью CopyWebpackPlugin. Этот плагин может копировать такие файлы, как изображения, видео и другие ресурсы, в папкуdist
.
Установите CopyWebpackPlugin с помощью следующей команды:
Теперь добавим CopyWebpackPlugin в конфигурацию Webpack. Импортируйте плагин следующим образом:npm install copy-webpack-plugin --save-dev
Далее мы добавим CopyWebpackPlugin в опцию плагина. Свойствоconst CopyPlugin = require("copy-webpack-plugin");
from
— это папка, из которой мы будем копировать, а to
— это папка в каталоге dist, в которую нужно скопировать все файлы:
Создайте новую папку img и добавьте в нее изображения. После выполнения команды// ... plugins: [ new HtmlWebpackPlugin({ title: 'our project', template: 'src/custom.html' }), new MiniCssExtractPlugin({ filename: "bundle.css" }), new CopyPlugin({ patterns: [ { from: "src/img", to: "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
:
Далее мы добавим свойство devtool в конфигурацию Webpack и установим его в{ "compilerOptions": { "noImplicitAny": true, "target": "ES5", "module": "ES2015", "sourceMap": true } }
true
, указав Webpack сгенерировать соответствующую карту исходного кода для каждого собранного файла:
Выполнив командуmodule.exports = { devtool: 'source-map', // ... }
npm run build
, вы сможете отлаживать исходный код напрямую.