So verwenden Sie TypeScript mit Webpack und Babel

Die Kombination von TypeScript mit Webpack und Babel kann den Entwicklungsprozess verbessern, indem sie robuste Typprüfung, effiziente Modulbündelung und die Möglichkeit zur Nutzung moderner JavaScript-Funktionen bietet. In diesem Handbuch werden die Schritte zum Einrichten von TypeScript mit Webpack und Babel beschrieben.

Schritt 1: Einrichten des Projekts

Beginnen Sie mit der Initialisierung eines neuen Node.js-Projekts und der Installation der erforderlichen Abhängigkeiten.

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

Schritt 2: TypeScript konfigurieren

Erstellen Sie eine tsconfig.json-Datei, um TypeScript-Optionen zu konfigurieren. Diese Datei weist TypeScript an, wie Ihr Code kompiliert werden soll.

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

Schritt 3: Babel konfigurieren

Erstellen Sie eine .babelrc-Datei für die Babel-Konfiguration. Diese Datei teilt Babel mit, welche Voreinstellungen zum Transpilieren des TypeScript-Codes verwendet werden sollen.

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

Schritt 4: Webpack konfigurieren

Erstellen Sie eine webpack.config.js-Datei, um Webpack für das Bündeln der TypeScript-Dateien einzurichten. Diese Datei definiert, wie Webpack mit verschiedenen Dateitypen umgehen soll.

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

Schritt 5: Quelldateien erstellen

Erstellen Sie eine Datei src/index.ts, die als Einstiegspunkt für Ihre Anwendung dient.

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

Schritt 6: Erstellen und Ausführen

Verwenden Sie Webpack, um den TypeScript-Code in einer einzigen JavaScript-Datei zu bündeln. Führen Sie den Build-Befehl aus, um die Ausgabe zu generieren.

npx webpack

Abschluss

Die Integration von TypeScript mit Webpack und Babel bietet ein leistungsstarkes Setup für die moderne Webentwicklung. Mit diesen Schritten können Entwickler die Typprüfungs- und modernen JavaScript-Funktionen von TypeScript nutzen und gleichzeitig Code effizient mit Webpack bündeln und mit Babel transpilieren.