Hur man använder TypeScript med Webpack och Babel

Att kombinera TypeScript med Webpack och Babel kan förbättra utvecklingsprocessen genom att tillhandahålla robust typkontroll, effektiv modulbuntning och möjligheten att använda moderna JavaScript-funktioner. Den här guiden täcker stegen för att ställa in TypeScript med Webpack och Babel.

Steg 1: Konfigurera projektet

Börja med att initiera ett nytt Node.js-projekt och installera nödvändiga beroenden.

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

Steg 2: Konfigurera TypeScript

Skapa en tsconfig.json-fil för att konfigurera TypeScript-alternativ. Den här filen kommer att instruera TypeScript om hur du kompilerar din kod.

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

Steg 3: Konfigurera Babel

Skapa en .babelrc-fil för Babel-konfiguration. Den här filen talar om för Babel vilka förinställningar som ska användas för att transpilera TypeScript-koden.

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

Steg 4: Konfigurera Webpack

Skapa en webpack.config.js-fil för att ställa in Webpack för buntning av TypeScript-filer. Den här filen definierar hur Webpack ska hantera olika typer av filer.

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

Steg 5: Skapa källfiler

Skapa en src/index.ts fil för att fungera som startpunkt för din ansökan.

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

Steg 6: Bygg och kör

Använd Webpack för att bunta TypeScript-koden till en enda JavaScript-fil. Kör byggkommandot för att generera utdata.

npx webpack

Slutsats

Att integrera TypeScript med Webpack och Babel ger en kraftfull installation för modern webbutveckling. Genom att följa dessa steg kan utvecklare utnyttja TypeScripts typkontroll och moderna JavaScript-funktioner samtidigt som de effektivt kombinerar kod med Webpack och transpilerar med Babel.