Cara Menggunakan TypeScript dengan Webpack dan Babel

Menggabungkan TypeScript dengan Webpack dan Babel dapat meningkatkan proses pengembangan dengan menyediakan pengecekan tipe yang kuat, penggabungan modul yang efisien, dan kemampuan untuk menggunakan fitur JavaScript modern. Panduan ini membahas langkah-langkah untuk menyiapkan TypeScript dengan Webpack dan Babel.

Langkah 1: Siapkan Proyek

Mulailah dengan menginisialisasi proyek Node.js baru dan menginstal dependensi yang diperlukan.

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

Langkah 2: Konfigurasikan TypeScript

Buat file tsconfig.json untuk mengonfigurasi opsi TypeScript. File ini akan memberi tahu TypeScript tentang cara mengompilasi kode Anda.

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

Langkah 3: Konfigurasi Babel

Buat file .babelrc untuk konfigurasi Babel. File ini memberi tahu Babel preset mana yang akan digunakan untuk mentranspilasi kode TypeScript.

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

Langkah 4: Konfigurasikan Webpack

Buat file webpack.config.js untuk menyiapkan Webpack guna menggabungkan file TypeScript. File ini menentukan cara Webpack menangani berbagai jenis file.

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',
};

Langkah 5: Buat File Sumber

Buat file src/index.ts untuk berfungsi sebagai titik masuk untuk aplikasi Anda.

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

Langkah 6: Bangun dan Jalankan

Gunakan Webpack untuk menggabungkan kode TypeScript ke dalam satu berkas JavaScript. Jalankan perintah build untuk menghasilkan output.

npx webpack

Kesimpulan

Mengintegrasikan TypeScript dengan Webpack dan Babel menyediakan pengaturan yang kuat untuk pengembangan web modern. Dengan mengikuti langkah-langkah ini, pengembang dapat memanfaatkan fitur pengecekan tipe dan JavaScript modern TypeScript sambil menggabungkan kode dengan Webpack dan melakukan transpilasi dengan Babel secara efisien.