Системы сборки проектов

    
      mkdir my-webpack-ts-app
      cd my-webpack-ts-app
      npm init -y
      npm install typescript ts-loader webpack webpack-cli --save-dev
    
  

    
      {
        "compilerOptions": {
          "target": "ES6",
          "module": "ESNext",
          "outDir": "./dist",
          "strict": true,
          "esModuleInterop": true,
          "skipLibCheck": true
        },
        "include": ["src"],
        "exclude": ["node_modules"]
      }
    
  

    
      const path = require('path');
      // Подключает модуль Node.js 'path', который
      // предоставляет утилиты для работы с путями файловой системы.

      module.exports = {
        entry: './src/index.ts',
        // Указывает входную точку для Webpack, то есть файл, с которого
        // начинается сборка. В данном случае это './src/index.ts'.

        module: {
          rules: [
            {
              test: /\.ts$/, // Указывает регулярное выражение для файлов, которые
              // Webpack должен обрабатывать с помощью правила (все файлы с расширением .ts).

              use: 'ts-loader', // Указывает, какой загрузчик (loader) использовать для обработки
              // TypeScript-файлов. В данном случае это 'ts-loader', который компилирует TypeScript в JavaScript.

              exclude: /node_modules/ // Исключает файлы и папки внутри node_modules,
              // чтобы они не обрабатывались 'ts-loader'.
            }
          ]
        },

        resolve: {
          extensions: ['.ts', '.js'] // Указывает расширения файлов, которые Webpack будет
          // пытаться разрешать при импортах. Это позволяет не указывать расширения явно при импорте файлов.
        },

        output: {
          filename: 'bundle.js', // Имя файла, который будет сгенерирован после сборки. В данном случае это 'bundle.js'.

          path: path.resolve(__dirname, 'dist') // Указывает путь для выходного файла. Функция 'path.resolve'
          // создаёт абсолютный путь, и здесь файлы будут сохранены в папке 'dist' относительно корневой директории.
        },

        mode: 'development' // Указывает режим сборки. В режиме 'development' Webpack создаёт менее
        // оптимизированный, но более удобный для отладки код.
      };
    
  

    
      mkdir src
      touch src/index.ts
    
  

    
      const greeting: string = 'Hello, Webpack with TypeScript!';
      console.log(greeting);
    
  

    
      "scripts": {
        "build": "webpack"
      }
    
  

    
      npm run build
    
  

    
      mkdir my-gulp-ts-app
      cd my-gulp-ts-app
      npm init -y
      npm install gulp typescript gulp-typescript --save-dev
    
  

    
      {
        "compilerOptions": {
          "target": "ES6",
          "module": "commonjs",
          "outDir": "./dist",
          "strict": true,
          "esModuleInterop": true,
          "skipLibCheck": true
        },
        "include": ["src"],
        "exclude": ["node_modules"]
      }
    
  

    
      const gulp = require('gulp'); // Подключает Gulp, инструмент автоматизации сборки.
      const ts = require('gulp-typescript'); // Подключает плагин для обработки TypeScript-файлов.

      const tsProject = ts.createProject('tsconfig.json'); // Создаёт проект TypeScript на основе конфигурации из 'tsconfig.json'.

      // Задача для обработки TypeScript
      gulp.task('scripts', () => {
        return tsProject.src() // Получает все файлы TypeScript из проекта.
          .pipe(tsProject()) // Передаёт файлы в tsProject для компиляции.
          .js.pipe(gulp.dest('dist')); // Сохраняет скомпилированные JavaScript-файлы в папку 'dist'.
      });

      // Задача для наблюдения за изменениями в TypeScript-файлах
      gulp.task('watch', () => {
        gulp.watch('src/**/*.ts', gulp.series('scripts')); // Наблюдает за изменениями в файлах .ts в папке 'src' и запускает задачу 'scripts'.
      });

      // Задача по умолчанию, которая выполняет 'scripts' и затем 'watch'
      gulp.task('default', gulp.series('scripts', 'watch'));
    
  

    
      mkdir src
      touch src/index.ts
    
  

    
      const greeting: string = 'Hello, Gulp with TypeScript!';
      console.log(greeting);
    
  

    
      npx gulp
    
  

    
      mkdir my-parcel-ts-app
      cd my-parcel-ts-app
      npm init -y
      npm install parcel typescript --save-dev
    
  

    
      {
        "compilerOptions": {
          "target": "ES6",
          "module": "ESNext",
          "strict": true,
          "esModuleInterop": true,
          "skipLibCheck": true
        },
        "include": ["src"],
        "exclude": ["node_modules"]
      }
    
  

    
      mkdir src
      touch src/index.ts
    
  

    
      const greeting: string = 'Hello, Parcel with TypeScript!';
      console.log(greeting);
    
  

    
      "scripts": {
        "dev": "parcel src/index.html",
        "build": "parcel build src/index.html"
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Parcel TypeScript</title>
        </head>
        <body>
          <script src="./index.ts"></script>
        </body>
      </html>
    
  

    
      npm run dev