כיצד להשתמש ב-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 מספק הגדרה רבת עוצמה לפיתוח אינטרנט מודרני. על ידי ביצוע שלבים אלה, מפתחים יכולים למנף את בדיקת הסוג ותכונות JavaScript המודרניות של TypeScript תוך חיבור יעיל של קוד עם Webpack והעברה עם Babel.