6.1 Вспоминаем детали сборки проекта
Давайте вспомним, как вообще работает сборка проекта в TypeScript.
Файл tsconfig.json используется для указания корневых файлов и параметров компилятора TypeScript. Он находится в корне вашего проекта и управляет поведением компиляции TypeScript.
Пример базового tsconfig.json
В этом примере указаны базовые параметры, такие как целевая версия JavaScript (target), модульная система (module), выходной каталог (outDir), корневой каталог (rootDir) и строгая типизация (strict):
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true
},
"include": ["src/**/*"]
}
6.2 Важные параметры tsconfig.json
1.Параметр compilerOptions
Раздел compilerOptions содержит ключевые параметры компилятора, определяющие, как TypeScript будет транслировать код.
2.Параметр target
Параметр target указывает версию JavaScript, в которую TypeScript должен компилировать ваш код.
"target": "es6"
Значения могут быть: es3, es5, es6/es2015, es2016, es2017, es2018, es2019, es2020, es2021, es2022, es2024, esnext.
3.Параметр module
Параметр module определяет систему модулей, которую TypeScript будет использовать для генерации модульного кода.
"module": "commonjs"
Значения могут быть: commonjs, amd, system, umd, es6/es2015, esnext.
4.Параметр outDir
Параметр outDir указывает на каталог, в который будут помещены скомпилированные файлы JavaScript.
"outDir": "./dist"
5.Параметр rootDir
Параметр rootDir указывает на корневой каталог, содержащий исходные файлы TypeScript.
"rootDir": "./src"
6.Параметр strict
Параметр strict включает строгую типизацию, что помогает выявлять потенциальные ошибки на этапе компиляции.
"strict": true
7.Параметр esModuleInterop
Параметр esModuleInterop обеспечивает лучшую совместимость с CommonJS и AMD модулями при использовании импорта по умолчанию.
"esModuleInterop": true
8.Параметр moduleResolution
Параметр moduleResolution определяет, как TypeScript будет разрешать модули.
"moduleResolution": "node"
Значения могут быть: classic, node.
9.Параметр paths и baseUrl
Параметры paths и baseUrl позволяют настраивать алиасы для модулей, что делает импорт модулей более удобным.
"baseUrl": "./",
"paths": {
"@app/*": ["src/app/*"],
"@components/*": ["src/components/*"]
}
6.3 include и exclude
Разделы include и exclude указывают файлы и каталоги, которые должны быть включены или исключены из компиляции.
include
Параметр include определяет, какие файлы должны быть включены в проект.
"include": ["src/**/*"]
exclude
Параметр exclude определяет, какие файлы должны быть исключены из проекта.
"exclude": ["node_modules", "dist"]
6.4 Реальные примеры
Рассмотрим примеры конфигурации tsconfig.json для различных проектов.
Проект с использованием CommonJS:
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"moduleResolution": "node"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
Проект с использованием ES6 модулей:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"moduleResolution": "node"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
Проект с алиасами для модулей:
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"@app/*": ["src/app/*"],
"@components/*": ["src/components/*"]
}
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
6.5 Интеграция с инструментами сборки
TypeScript легко интегрируется с различными инструментами сборки, такими как Webpack, Rollup и Gulp. Использование tsconfig.json упрощает эту интеграцию.
Пример интеграции с 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: ['.ts', '.js'],
alias: {
'@app': path.resolve(__dirname, 'src/app/'),
'@components': path.resolve(__dirname, 'src/components/')
}
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Этот пример показывает, как настроить Webpack для использования TypeScript и алиасов, определенных в tsconfig.json.
Пример интеграции с Gulp: gulpfile.js
const gulp = require('gulp');
const ts = require('gulp-typescript');
const tsProject = ts.createProject('tsconfig.json');
gulp.task('scripts', function () {
return tsProject.src()
.pipe(tsProject())
.pipe(gulp.dest('dist'));
});
gulp.task('default', gulp.series('scripts'));
Этот пример показывает, как настроить Gulp для компиляции TypeScript с использованием конфигурации из tsconfig.json.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ