Jak używać TypeScript z Webpack i Babel

Połączenie TypeScript z Webpack i Babel może usprawnić proces rozwoju, zapewniając solidne sprawdzanie typów, wydajne pakowanie modułów i możliwość korzystania z nowoczesnych funkcji JavaScript. Ten przewodnik obejmuje kroki konfiguracji TypeScript z Webpack i Babel.

Krok 1: Konfiguracja projektu

Zacznij od zainicjowania nowego projektu Node.js i zainstalowania niezbędnych zależności.

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

Krok 2: Skonfiguruj TypeScript

Utwórz plik tsconfig.json, aby skonfigurować opcje TypeScript. Ten plik poinstruuje TypeScript, jak skompilować Twój kod.

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

Krok 3: Skonfiguruj Babel

Utwórz plik .babelrc dla konfiguracji Babel. Ten plik informuje Babel, jakich ustawień wstępnych użyć do transpilacji kodu TypeScript.

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

Krok 4: Skonfiguruj Webpack

Utwórz plik webpack.config.js, aby skonfigurować Webpack do pakowania plików TypeScript. Ten plik definiuje sposób, w jaki Webpack powinien obsługiwać różne typy plików.

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

Krok 5: Utwórz pliki źródłowe

Utwórz plik src/index.ts, który będzie punktem wejścia dla Twojej aplikacji.

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

Krok 6: Kompilacja i uruchomienie

Użyj Webpacka, aby spakować kod TypeScript do jednego pliku JavaScript. Uruchom polecenie build, aby wygenerować dane wyjściowe.

npx webpack

Wniosek

Zintegrowanie TypeScript z Webpack i Babel zapewnia potężną konfigurację dla nowoczesnego rozwoju sieci. Postępując zgodnie z tymi krokami, programiści mogą wykorzystać funkcje TypeScript do sprawdzania typów i nowoczesne funkcje JavaScript, jednocześnie skutecznie pakując kod z Webpack i transpilując z Babel.