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

Метод 1: использование Task Runner (Gulp)
Gulp — это популярный инструмент для запуска задач, который может автоматизировать различные задачи разработки, включая непрерывную сборку TypeScript при сохранении. Вот пример конфигурации Gulpfile.js:

const gulp = require('gulp');
const typescript = require('gulp-typescript');
gulp.task('build', function () {
  return gulp
    .src('src//*.ts')
    .pipe(typescript())
    .pipe(gulp.dest('dist'));
});
gulp.task('watch', function () {
  gulp.watch('src//*.ts', gulp.series('build'));
});
gulp.task('default', gulp.series('build', 'watch'));

Метод 2: использование системы сборки (Webpack)
Webpack — это мощная система сборки, которую можно настроить для выполнения непрерывных сборок TypeScript при сохранении. Вот пример файла webpack.config.js:

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  watch: true,
};

Метод 3. Использование расширения редактора кода (Visual Studio Code)
Если вы используете Visual Studio Code в качестве редактора кода, вы можете использовать расширения для обеспечения непрерывной сборки TypeScript при сохранении. Расширение «TypeScript Hero» — популярный выбор. Установите расширение и настройте его, чтобы включить автоматическую сборку при сохранении.

Метод 4: использование Task Runner (скрипты npm)
Если вы предпочитаете использовать сценарии npm, вы можете настроить непрерывную сборку TypeScript при сохранении с помощью компилятора TypeScript «tsc». Обновите файл package.json, добавив в него следующие скрипты:

{
  "scripts": {
    "build": "tsc",
    "watch": "tsc --watch"
  }
}

Затем вы можете запустить npm run watch, чтобы начать процесс непрерывной сборки.

Метод 5: использование инструмента автоматизации сборки (Grunt)
Grunt — еще один популярный инструмент автоматизации сборки, который можно использовать для обеспечения непрерывной сборки TypeScript при сохранении. Вот пример конфигурации Gruntfile.js:

module.exports = function(grunt) {
  grunt.initConfig({
    exec: {
      build: 'tsc',
    },
    watch: {
      files: ['src//*.ts'],
      tasks: ['exec:build'],
    },
  });
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-exec');
  grunt.registerTask('default', ['exec:build', 'watch']);
};

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

Не забудьте сохранить файлы, а инструменты сделают все остальное!