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

Variables d'Entorn

Següent ►
►

Les variables d'entorn són una manera poderosa de configurar el comportament de les aplicacions sense haver de modificar el codi font. En el context de Webpack, les variables d'entorn es poden utilitzar per definir configuracions específiques per a diferents entorns (per exemple, desenvolupament, producció, proves). Aquest tema cobrirà com configurar i utilitzar variables d'entorn amb Webpack.

Continguts

  1. Què són les Variables d'Entorn?
  2. Configuració de Variables d'Entorn amb Webpack
  3. Exemple Pràctic
  4. Exercicis Pràctics
  5. Conclusió

Què són les Variables d'Entorn?

Les variables d'entorn són valors dinàmics que poden afectar el comportament dels processos en un sistema operatiu. En el desenvolupament de programari, s'utilitzen sovint per:

  • Configurar diferents entorns (desenvolupament, producció, proves).
  • Emmagatzemar informació sensible (com ara claus API).
  • Personalitzar el comportament de l'aplicació sense canviar el codi font.

Configuració de Variables d'Entorn amb Webpack

Pas 1: Instal·lar dotenv

Per gestionar les variables d'entorn, utilitzarem el paquet dotenv. Aquest paquet carrega variables d'entorn des d'un fitxer .env al process.env de Node.js.

npm install dotenv --save

Pas 2: Crear un fitxer .env

Crea un fitxer .env a l'arrel del teu projecte i defineix les variables d'entorn que necessitis. Per exemple:

NODE_ENV=development
API_URL=https://api.example.com

Pas 3: Configurar Webpack per utilitzar dotenv

Modifica el fitxer de configuració de Webpack (webpack.config.js) per carregar les variables d'entorn utilitzant dotenv i el plugin DefinePlugin de Webpack.

const path = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');

// Carregar variables d'entorn des del fitxer .env
const env = dotenv.config().parsed;

// Convertir les variables d'entorn en un format que DefinePlugin pugui utilitzar
const envKeys = Object.keys(env).reduce((prev, next) => {
  prev[`process.env.${next}`] = JSON.stringify(env[next]);
  return prev;
}, {});

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.DefinePlugin(envKeys)
  ],
  mode: 'development'
};

Exemple Pràctic

Suposem que tenim una aplicació que necessita una URL d'API diferent segons l'entorn. Podem utilitzar les variables d'entorn per gestionar això.

Fitxer .env

NODE_ENV=development
API_URL=https://dev.api.example.com

Fitxer src/index.js

console.log('Entorn:', process.env.NODE_ENV);
console.log('URL de l\'API:', process.env.API_URL);

Fitxer webpack.config.js

const path = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');

const env = dotenv.config().parsed;

const envKeys = Object.keys(env).reduce((prev, next) => {
  prev[`process.env.${next}`] = JSON.stringify(env[next]);
  return prev;
}, {});

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.DefinePlugin(envKeys)
  ],
  mode: 'development'
};

Executar Webpack

npx webpack

Quan executis el codi, hauries de veure les variables d'entorn impreses a la consola.

Exercicis Pràctics

  1. Exercici 1: Crea un fitxer .env amb una variable d'entorn APP_NAME i mostra el seu valor a la consola utilitzant Webpack.
  2. Exercici 2: Configura Webpack per utilitzar diferents fitxers .env per a desenvolupament i producció. Per exemple, .env.development i .env.production.

Solucions

Solució Exercici 1:

  1. Crea un fitxer .env:
APP_NAME=MyAwesomeApp
  1. Modifica webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');

const env = dotenv.config().parsed;

const envKeys = Object.keys(env).reduce((prev, next) => {
  prev[`process.env.${next}`] = JSON.stringify(env[next]);
  return prev;
}, {});

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.DefinePlugin(envKeys)
  ],
  mode: 'development'
};
  1. Modifica src/index.js:
console.log('Nom de l\'aplicació:', process.env.APP_NAME);
  1. Executa Webpack:
npx webpack

Solució Exercici 2:

  1. Crea dos fitxers .env:

.env.development:

NODE_ENV=development
API_URL=https://dev.api.example.com

.env.production:

NODE_ENV=production
API_URL=https://api.example.com
  1. Modifica webpack.config.js per carregar el fitxer .env correcte segons l'entorn:
const path = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');
const fs = require('fs');

module.exports = (env) => {
  const currentPath = path.join(__dirname);
  const basePath = currentPath + '/.env';
  const envPath = basePath + '.' + env.ENVIRONMENT;
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;
  const fileEnv = dotenv.config({ path: finalPath }).parsed;

  const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
    return prev;
  }, {});

  return {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ],
    mode: env.ENVIRONMENT === 'production' ? 'production' : 'development'
  };
};
  1. Executa Webpack amb l'entorn desitjat:
npx webpack --env ENVIRONMENT=development
npx webpack --env ENVIRONMENT=production

Conclusió

Les variables d'entorn són una eina essencial per gestionar configuracions dinàmiques en aplicacions. Amb Webpack, podem utilitzar el paquet dotenv i el plugin DefinePlugin per carregar i utilitzar aquestes variables de manera eficient. Això ens permet tenir configuracions específiques per a diferents entorns sense haver de modificar el codi font, millorant així la flexibilitat i mantenibilitat del nostre projecte.

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