Sådan bruger du TypeScript med Webpack og Babel

Kombination af TypeScript med Webpack og Babel kan forbedre udviklingsprocessen ved at give robust typekontrol, effektiv modulbundtning og muligheden for at bruge moderne JavaScript-funktioner. Denne vejledning dækker trinene til opsætning af TypeScript med Webpack og Babel.

Trin 1: Konfigurer projektet

Begynd med at initialisere et nyt Node.js-projekt og installere de nødvendige afhængigheder.

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

Trin 2: Konfigurer TypeScript

Opret en tsconfig.json fil for at konfigurere TypeScript-indstillinger. Denne fil vil instruere TypeScript om, hvordan du kompilerer din kode.

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

Trin 3: Konfigurer Babel

Opret en .babelrc fil til Babel-konfiguration. Denne fil fortæller Babel, hvilke forudindstillinger der skal bruges til at transpilere TypeScript-koden.

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

Trin 4: Konfigurer Webpack

Opret en webpack.config.js fil for at konfigurere Webpack til at samle TypeScript-filerne. Denne fil definerer, hvordan Webpack skal håndtere forskellige typer 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',
};

Trin 5: Opret kildefiler

Opret en src/index.ts fil til at tjene som indgangspunkt for din applikation.

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

Trin 6: Byg og kør

Brug Webpack til at samle TypeScript-koden i en enkelt JavaScript-fil. Kør build-kommandoen for at generere output.

npx webpack

Konklusion

Integration af TypeScript med Webpack og Babel giver en kraftfuld opsætning til moderne webudvikling. Ved at følge disse trin kan udviklere udnytte TypeScripts typekontrol og moderne JavaScript-funktioner, mens de effektivt samler kode med Webpack og transpilerer med Babel.