Как использовать TypeScript с Webpack и Babel

Объединение TypeScript с Webpack и Babel может улучшить процесс разработки, предоставляя надежную проверку типов, эффективное связывание модулей и возможность использовать современные функции JavaScript. В этом руководстве рассматриваются шаги по настройке TypeScript с Webpack и Babel.

Шаг 1: Настройте проект

Начните с инициализации нового проекта Node.js и установки необходимых зависимостей.

npm init -y
npm install typescript webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-typescript --save-dev

Шаг 2: Настройка TypeScript

Создайте файл tsconfig.json для настройки параметров TypeScript. Этот файл будет указывать TypeScript, как компилировать ваш код.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Шаг 3: Настройка Babel

Создайте файл .babelrc для конфигурации Babel. Этот файл сообщает Babel, какие пресеты использовать для транспиляции кода TypeScript.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

Шаг 4: Настройка Webpack

Создайте файл webpack.config.js для настройки Webpack для объединения файлов TypeScript. Этот файл определяет, как Webpack должен обрабатывать различные типы файлов.

const path = require('path');

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

Шаг 5: Создание исходных файлов

Создайте файл src/index.ts, который будет служить точкой входа для вашего приложения.

console.log('Hello, TypeScript with Webpack and Babel!');

Шаг 6: Сборка и запуск

Используйте Webpack для объединения кода TypeScript в один файл JavaScript. Запустите команду build, чтобы сгенерировать вывод.

npx webpack

Заключение

Интеграция TypeScript с Webpack и Babel обеспечивает мощную настройку для современной веб-разработки. Выполняя эти шаги, разработчики могут использовать проверку типов TypeScript и современные функции JavaScript, эффективно объединяя код с Webpack и транспилируя с Babel.