El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

TypeScript amb Webpack

Següent ►
►

En aquest tema, aprendrem com configurar i utilitzar Webpack amb TypeScript per a la construcció de projectes. Webpack és un empaquetador de mòduls JavaScript que ens permet agrupar diversos fitxers en un o més paquets optimitzats per a la producció.

Objectius

  • Entendre què és Webpack i per què és útil.
  • Configurar un projecte TypeScript amb Webpack.
  • Escriure un fitxer de configuració de Webpack (webpack.config.js).
  • Compilar i executar un projecte TypeScript utilitzant Webpack.

Què és Webpack?

Webpack és una eina que ens permet agrupar tots els nostres mòduls JavaScript (i altres recursos com CSS, imatges, etc.) en un o més fitxers de sortida. Això és especialment útil per a aplicacions web modernes que poden tenir molts fitxers i dependències.

Beneficis de Webpack

  • Modularitat: Permet utilitzar mòduls ES6, CommonJS, AMD, etc.
  • Optimització: Minificació, eliminació de codi mort, càrrega de recursos de manera asíncrona.
  • Plugins: Gran varietat de plugins per a diferents necessitats (optimització, transformació de codi, etc.).

Configuració de Webpack amb TypeScript

Pas 1: Crear un projecte nou

Primer, crearem un nou projecte i inicialitzarem npm.

mkdir typescript-webpack-project
cd typescript-webpack-project
npm init -y

Pas 2: Instal·lar les dependències necessàries

Instal·larem Webpack, Webpack CLI, TypeScript i el carregador de TypeScript per a Webpack.

npm install --save-dev webpack webpack-cli typescript ts-loader

Pas 3: Configurar TypeScript

Crearem un fitxer tsconfig.json per configurar TypeScript.

{
  "compilerOptions": {
    "outDir": "./dist",
    "sourceMap": true,
    "strict": true,
    "module": "es6",
    "moduleResolution": "node",
    "target": "es5",
    "esModuleInterop": true
  },
  "include": ["src"]
}

Pas 4: Configurar Webpack

Crearem un fitxer webpack.config.js per configurar Webpack.

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'source-map'
};

Pas 5: Estructura del projecte

L'estructura del projecte hauria de ser similar a aquesta:

typescript-webpack-project/
├── dist/
├── node_modules/
├── src/
│   └── index.ts
├── package.json
├── tsconfig.json
└── webpack.config.js

Pas 6: Escriure codi TypeScript

Crearem un fitxer src/index.ts amb el següent codi:

const message: string = 'Hello, TypeScript with Webpack!';
console.log(message);

Pas 7: Compilar i executar el projecte

Afegirem un script al package.json per compilar el projecte amb Webpack.

"scripts": {
  "build": "webpack"
}

Ara podem compilar el projecte executant:

npm run build

Això generarà un fitxer bundle.js a la carpeta dist.

Resum

En aquest tema, hem après com configurar un projecte TypeScript amb Webpack. Hem creat un fitxer de configuració de Webpack, configurat TypeScript i escrit un simple fitxer TypeScript. Finalment, hem compilat el projecte utilitzant Webpack.

Exercici Pràctic

  1. Afegir un fitxer addicional: Crea un nou fitxer src/utils.ts amb una funció que retorni un missatge de benvinguda. Importa aquesta funció a src/index.ts i utilitza-la.

Solució:

src/utils.ts:

export function getWelcomeMessage(name: string): string {
  return `Welcome, ${name}!`;
}

src/index.ts:

import { getWelcomeMessage } from './utils';

const message: string = getWelcomeMessage('TypeScript Developer');
console.log(message);

Executa npm run build per veure els canvis reflectits en el fitxer bundle.js.

Amb això, hem completat la configuració bàsica de TypeScript amb Webpack. En els següents mòduls, explorarem més funcionalitats avançades i millors pràctiques per optimitzar el nostre flux de treball.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats