كيفية استخدام 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.