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

Configuració d'un Projecte Node.js

Següent ►
►

En aquest tema, aprendrem a configurar un projecte Node.js utilitzant Webpack. Això ens permetrà aprofitar les capacitats de Webpack per gestionar les nostres dependències, optimitzar el codi i millorar el flux de treball de desenvolupament.

  1. Inicialització del Projecte

Pas 1: Crear el Directori del Projecte

Primer, crea un nou directori per al teu projecte i navega fins a ell:

mkdir nodejs-webpack-project
cd nodejs-webpack-project

Pas 2: Inicialitzar el Projecte amb npm

Inicialitza el projecte amb npm per crear un fitxer package.json:

npm init -y

  1. Instal·lació de Dependències

Pas 1: Instal·lar Webpack i Webpack CLI

Instal·la Webpack i Webpack CLI com a dependències de desenvolupament:

npm install --save-dev webpack webpack-cli

Pas 2: Instal·lar Babel

Babel és una eina que ens permet utilitzar la sintaxi moderna de JavaScript. Instal·la Babel i els seus presets:

npm install --save-dev @babel/core @babel/preset-env babel-loader

Pas 3: Instal·lar altres dependències necessàries

Instal·la altres dependències que puguis necessitar, com ara express per a un servidor web bàsic:

npm install express

  1. Configuració de Webpack

Pas 1: Crear el Fitxer de Configuració de Webpack

Crea un fitxer anomenat webpack.config.js a l'arrel del teu projecte i afegeix la configuració bàsica:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  target: 'node'
};

Explicació del Codi

  • entry: Defineix el punt d'entrada del teu projecte.
  • output: Especifica el nom del fitxer de sortida i la ubicació.
  • module.rules: Configura Babel per transformar el codi JavaScript modern a una versió compatible amb Node.js.
  • target: Indica que el codi està destinat a ser executat en un entorn Node.js.

  1. Estructura del Projecte

Crea l'estructura bàsica del projecte:

mkdir src
touch src/index.js

Exemple de Codi en src/index.js

Afegeix el següent codi a src/index.js per crear un servidor bàsic amb Express:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

  1. Scripts de npm

Actualitza el fitxer package.json per afegir scripts de construcció i execució:

"scripts": {
  "build": "webpack",
  "start": "node dist/bundle.js"
}

  1. Construcció i Execució del Projecte

Pas 1: Construir el Projecte

Executa el següent comandament per construir el projecte:

npm run build

Pas 2: Executar el Projecte

Després de construir el projecte, executa el servidor:

npm start

Ara, si navegues a http://localhost:3000, hauràs de veure el missatge "Hello World!".

Exercici Pràctic

Exercici

  1. Afegeix una nova ruta /about que retorni el missatge "About Page".
  2. Modifica el fitxer webpack.config.js per incloure un plugin que netegi el directori dist abans de cada construcció.

Solució

  1. Modifica src/index.js per afegir la nova ruta:
app.get('/about', (req, res) => {
  res.send('About Page');
});
  1. Instal·la el plugin clean-webpack-plugin:
npm install --save-dev clean-webpack-plugin
  1. Modifica webpack.config.js per utilitzar el plugin:
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ... (resta de la configuració)
  plugins: [
    new CleanWebpackPlugin()
  ]
};

Conclusió

En aquest tema, hem après a configurar un projecte Node.js utilitzant Webpack. Hem cobert la instal·lació de dependències, la configuració de Webpack, la creació d'un servidor bàsic amb Express i la construcció i execució del projecte. A més, hem practicat afegint una nova ruta i utilitzant un plugin per netejar el directori de sortida. Amb aquests coneixements, estàs preparat per començar a desenvolupar aplicacions Node.js optimitzades amb Webpack.

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