Curso de Programación Web con PHP y Symfony

Miryam Godoy

CODELAB

 

26/09/2024

 

https://meet.google.com/psd-mrvz-gzb

Para ver mejor las presentaciones y la pantalla de ejercicios

hay un link generado para pode acceder al google meet:

https://meet.google.com/psd-mrvz-gzb

Menú de hoy

  • Webpack JS
  • Symfony Bundle
  • Calabaza calabaza...

Webpack JS

Webpack es un empaquetador de módulos estáticos para aplicaciones javascript

Webpack JS

Lo habitual es utilizar un archivo de código especial llamado webpack.config.js que está en la raíz de tu proyecto de desarrollo y que define mediante código JavaScript las operaciones que quieres realizar. En este archivo defines toda la información necesaria para poder utilizar Webpack para tus propósitos.

Webpack JS

Lo habitual es utilizar un archivo de código especial llamado webpack.config.js que está en la raíz de tu proyecto de desarrollo y que define mediante código JavaScript las operaciones que quieres realizar. En este archivo defines toda la información necesaria para poder utilizar Webpack para tus propósitos.

Webpack JS

Entrada

//webpack.config.js
module.exports = {
  entry: './path/to/my/entry/file.js',
};

Entry es el punto de entrada de nuestra aplicación, en otras palabras, indica el archivo principal el cual arranca la aplicación.

Webpack JS

Producción

//webpack.config.js
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

Output es el punto de salida de la aplicación, que indica un paquete web en donde guardará los archivos listos para producción, como ser archivos .js, .htmly .css

Webpack JS

Cargadores

Por defecto webpack solo trabaja con archivos .jsy .json, pero todos sabemos que todas las webs tienen HTML Y CSS, entonces, ¿cómo solucionamos esto? La respuesta son los Loaders.

Webpack JS

De manera muy genérica, un cargador está compuesto de 2 partes principales:

  • test: identifica qué tipos de archivos deben transformarse, por lo general es una expresión regular
  • use: indica el cargador propiamente dicho que se debe usar para realizar la transformación antes mencionada.

Cargadores

The Bundle System

Un paquete es similar a un complemento en otro software, pero incluso mejor. Las características principales del framework Symfony se implementan con paquetes (FrameworkBundle, SecurityBundle, DebugBundle, etc.). También se utilizan para agregar nuevas características a su aplicación a través de paquetes de terceros .

The Bundle System

//webpack.config.js
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
     rules: [
         {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
         },
     ],
  },
};

The Bundle System

Un paquete es similar a un complemento en otro software, pero incluso mejor. Las características principales del framework Symfony se implementan con paquetes (FrameworkBundle, SecurityBundle, DebugBundle, etc.). También se utilizan para agregar nuevas características a su aplicación a través de paquetes de terceros .

The Bundle System

Los paquetes utilizados en sus aplicaciones deben estar habilitados por entorno en el config/bundles.php archivo:

// config/bundles.php
return [
    // 'all' means that the bundle is enabled for any Symfony environment
    Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
    Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true],
    Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
    Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
    Doctrine\Bundle\DoctrineBundle\DoctrineBundle::class => ['all' => true],
    Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle::class => ['all' => true],
    // this bundle is enabled only in 'dev' and 'test', so you can't use it in 'prod'
    Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
];

Symfony

Veamos un ejemplo

Curso de PHP (Clase 9)

By Pedro Flores

Curso de PHP (Clase 9)

  • 49

More from Pedro Flores