Comment utiliser TypeScript avec Webpack et Babel

La combinaison de TypeScript avec Webpack et Babel peut améliorer le processus de développement en fournissant une vérification de type robuste, un regroupement de modules efficace et la possibilité d'utiliser des fonctionnalités JavaScript modernes. Ce guide décrit les étapes à suivre pour configurer TypeScript avec Webpack et Babel.

Étape 1: Configurer le projet

Commencez par initialiser un nouveau projet Node.js et installez les dépendances nécessaires.

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

Étape 2: Configurer TypeScript

Créez un fichier tsconfig.json pour configurer les options TypeScript. Ce fichier indiquera à TypeScript comment compiler votre code.

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

Étape 3: Configurer Babel

Créez un fichier .babelrc pour la configuration de Babel. Ce fichier indique à Babel les préréglages à utiliser pour la transpilation du code TypeScript.

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

Étape 4: Configurer Webpack

Créez un fichier webpack.config.js pour configurer Webpack afin de regrouper les fichiers TypeScript. Ce fichier définit la manière dont Webpack doit gérer les différents types de fichiers.

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

Étape 5: Créer les fichiers sources

Créez un fichier src/index.ts pour servir de point d'entrée à votre application.

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

Étape 6: Créer et exécuter

Utilisez Webpack pour regrouper le code TypeScript dans un seul fichier JavaScript. Exécutez la commande build pour générer la sortie.

npx webpack

Conclusion

L'intégration de TypeScript avec Webpack et Babel fournit une configuration puissante pour le développement Web moderne. En suivant ces étapes, les développeurs peuvent tirer parti des fonctionnalités de vérification de type et de JavaScript modernes de TypeScript tout en regroupant efficacement le code avec Webpack et en le transpilant avec Babel.