7.1 Знакомство с Sourcemaps
Sourcemaps — это ценный инструмент для разработчиков, особенно при работе с языками, которые компилируются в JavaScript, такими как TypeScript. Sourcemaps позволяют сопоставить скомпилированный JavaScript код с исходным TypeScript кодом, что значительно упрощает отладку и анализ ошибок.
Ниже мы рассмотрим, как настроить генерацию и использование sourcemaps в TypeScript проектах, и приведем примеры.
Что такое Sourcemaps?
Sourcemaps — это файлы, которые содержат информацию для связи скомпилированного кода с исходным кодом. Они позволяют разработчикам видеть исходный код TypeScript в разделе DevTools браузера, что делает процесс отладки более удобным и эффективным.
Почему Sourcemaps важны?
- Упрощенная отладка: Sourcemaps позволяют разработчикам видеть исходный TypeScript код вместо скомпилированного JavaScript кода в инструментах разработчика, что упрощает поиск и устранение ошибок.
- Понимание кода: Sourcemaps помогают лучше понять структуру и логику кода, особенно когда используется транспайлинг или минификация.
- Повышение производительности: разработчики могут быстрее находить и исправлять ошибки, что улучшает производительность разработки.
7.2 Настройка генерации Sourcemaps в TypeScript
1. Настройка TypeScript конфигурации
Первым шагом для генерации sourcemaps является настройка конфигурационного файла TypeScript (tsconfig.json). Добавьте или обновите следующие параметры:
{
"compilerOptions": {
"sourceMap": true,
"outDir": "./dist",
"target": "ES6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"],
"exclude": ["node_modules"]
}
Параметр sourceMap: true указывает компилятору TypeScript создавать sourcemaps для каждого скомпилированного файла.
2. Пример проекта
Создадим простой проект для демонстрации использования sourcemaps.
Структура проекта:
my-ts-app/
├── src/
│ ├── app.ts
├── dist/
├── tsconfig.json
├── package.json
Файл src/app.ts:
function greet(name: string): string {
return `Hello, ${name}!`;
}
const user = 'World';
console.log(greet(user));
Файл tsconfig.json:
{
"compilerOptions": {
"sourceMap": true,
"outDir": "./dist",
"target": "ES6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"],
"exclude": ["node_modules"]
}
3. Компиляция TypeScript кода
После компиляции в папке dist будут созданы файлы app.js и app.js.map.
Файл dist/app.js:
"use strict";
function greet(name) {
return "Hello, " + name + "!";
}
var user = 'World';
console.log(greet(user));
//# sourceMappingURL=app.js.map
Файл dist/app.js.map:
{
"version": 3,
"file": "app.js",
"sourceRoot": "",
"sources": ["../src/app.ts"],
"names": [],
"mappings": ";;AAAA,SAASA,KAAT,CAAeC,IAAf,EAAqB;AACnB,SAAO,aAAaA,IAAb,CAAP;AACD;;AAED,IAAMC,IAAI,GAAG,OAAb;AACAC,OAAO,CAACC,GAAR,CAAYH,KAAK,CAACC,IAAL,CAAlB"
}
4. Использование Sourcemaps в браузере
Чтобы использовать sourcemaps в разделе DevTools браузера, достаточно открыть консоль разработчика (F12 или Ctrl+Shift+I) и перейти на вкладку "Sources". Браузер автоматически загрузит sourcemaps и отобразит исходный TypeScript код вместо скомпилированного JavaScript кода.
Шаги для использования Sourcemaps в Google Chrome:
- Откройте веб-страницу в Google Chrome.
- Нажмите F12 или Ctrl+Shift+I для открытия инструментов разработчика.
- Перейдите на вкладку "Sources".
- Найдите и откройте исходный файл TypeScript.
7.3 Интеграция Sourcemaps с Webpack
Webpack — это популярный инструмент для сборки JavaScript приложений. Он поддерживает генерацию sourcemaps для TypeScript и других файлов.
1. Установка зависимостей
Установите Webpack и необходимые плагины:
npm install --save-dev webpack webpack-cli ts-loader source-map-loader
2. Настройка конфигурационного файла Webpack
Создайте файл webpack.config.js:
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/app.ts',
devtool: 'source-map',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
3. Обновление tsconfig.json
Убедитесь, что параметр sourceMap включен в tsconfig.json:
{
"compilerOptions": {
"sourceMap": true,
"outDir": "./dist",
"target": "ES6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"],
"exclude": ["node_modules"]
}
4. Сборка проекта с Webpack
Соберите проект, запустив команду:
npx webpack
После сборки в папке dist будут созданы файлы bundle.js и bundle.js.map.
7.4 Использование Sourcemaps в Node.js
Sourcemaps полезны не только в браузерной среде, но и при отладке серверного кода с использованием Node.js.
1. Установка зависимости
Установите пакет source-map-support, который добавляет поддержку sourcemaps в Node.js:
npm install source-map-support
2. Подключение source-map-support в коде
Добавьте следующую строку в начале вашего кода:
import 'source-map-support/register';
Теперь при запуске Node.js приложений ошибки и трассировки стека будут отображаться с использованием исходных файлов TypeScript.
Пример настройки проекта с использованием Sourcemaps в Node.js
Файл src/app.ts:
import 'source-map-support/register';
function greet(name: string): string {
throw new Error('Oops! Something went wrong.');
return `Hello, ${name}!`;
}
const user = 'World';
console.log(greet(user));
Файл tsconfig.json:
{
"compilerOptions": {
"sourceMap": true,
"outDir": "./dist",
"target": "ES6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"],
"exclude": ["node_modules"]
}
Компиляция и запуск кода:
Сначала скомпилируйте TypeScript код:
npx tsc
Затем запустите скомпилированный код с Node.js:
node dist/app.js
При возникновении ошибки в консоли будет отображена трассировка стека, указывающая на строку в исходном TypeScript коде, где произошла ошибка.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ