Як використовувати 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. Виконайте команду побудови, щоб створити результат.

npx webpack

Висновок

Інтеграція TypeScript із Webpack і Babel забезпечує потужне налаштування для сучасної веб-розробки. Виконуючи ці кроки, розробники можуть використовувати перевірку типу TypeScript і сучасні функції JavaScript, одночасно ефективно об’єднуючи код за допомогою Webpack і транспілюючи за допомогою Babel.