miércoles, 12 de agosto de 2020

React Js - 2- CRUD SIMPLE

1-
Proyecto nuevo
CMD:
cd arrastramos carpeta

npx create-react-app my-app



cd my-app



code .
en terminal : npm start
2-
Eliminamos todas las carpetas que no necesitamos
3-
App.js lo convertimos a App.jsx

4-
import React from 'react';


function App() {
  return (
    <div className="container">
      <h1 className="text-center mt-5">CRUD Simple</h1>
      <div className="row">
        <div className="col-8">
          <h4 className="text-center">Lista de tareas</h4>
          <ul className="list-group">
            <li className="list-group-item">
              <span className="lead">Nombre de la tarea</span>
              <button className="btn btn-danger btn-sm float-right mx-2">Eliminar</button>
              <button className="btn btn-warning btn-sm float-right">Editar</button>
            </li>
          </ul>
        </div>
        <div className="col-4">
        <h4 className="text-center">Formulario</h4>
        <form>
          <input
          type="text"
          className="form-control mb-2"
          placeholder="Ingrese tarea"
          />
          <button className="btn btn-dark btn-block" type="submit">Agregar</button>
        </form>
        </div>
      </div>
    </div>
  );
}

export default App;

Ahora vamos a aplicarle la logica, tenemos que hacer hooks de estado para el input.

1-
<button className="btn btn-dark btn-block" type="submit"
2-
 const [tarea, setTarea] = React.useState('')
3-
type="text"
className="form-control mb-2"
placeholder="Ingrese tarea"
onChange={ e => setTarea(e.target.value) }
4-
<form onSubmit={agregaTarea}>
5-
const agregaTarea = (e) => {
    e.preventDefault()
    if(!tarea.trim()){
      console.log('Este campo está vacío')
      return
    }
    console.log(tarea)
setTarea('')
  }

6-
type="text"
          className="form-control mb-2"
          placeholder="Ingrese tarea"
          onChange={ e => setTarea(e.target.value) }
          value={tarea}

7-Guardar ahora en un array para mostrar:
const [tareas, setTareas] = React.useState([])

8-
 const agregaTarea = (e) => {
    e.preventDefault()
    if(!tarea.trim()){
      console.log('Este campo está vacío')
      return
    }
    setTareas([
      ...tareas,
      {id: X, nombreTarea: tarea}
    ])
    console.log(tarea)
    setTarea('')
  }


9- Generar ID ALEATORIO CON LIBRERIA shortid:

https://www.npmjs.com/package/shortid

Copiar npm y escribir en terminal:
npm i shortid

Ahora lo llamamos arriba:
import shortid from 'shortid';

10-
setTareas([
      ...tareas,
      {id: shortid.generate(), nombreTarea: tarea}
    ])

11- Pintar lista de tareas:
<ul className="list-group">
   {
     tareas.map( item => (
     <li className="list-group-item" key={item.id}>
     <span className="lead">{item.nombreTarea}</span>
     <button className="btn btn-danger btn-sm float-right mx-2">Eliminar</button>
     <button className="btn btn-warning btn-sm float-right">Editar</button>
     </li>
     ) )
   }
</ul>


ELIMINAR TAREA:
1-
<button 
                className="btn btn-danger btn-sm float-right mx-2"
                onClick={ () => eliminarTarea(item.id) }
                >
                  Eliminar
                </button>

2-
Probar la relacion:
const eliminarTarea = (id) => {
    console.log(id)
  }

3-
const eliminarTarea = (id) => {
    const arrayFiltrado = tareas.filter( item => item.id !== id )
    setTareas(arrayFiltrado)
  }


FORMULARIO EDITAR TAREA:

1- Vamos a activar un MODO EDICION.
const [modoEdicion, setModoEdicion] = React.useState(false)

2-
onClick={ () => editarTarea(item) }

3- Verificar
const editarTarea = (item) => {
    console.log(item)
  }

4-
 const editarTarea = (item) => {
    //console.log(item)
    setModoEdicion(true)
  }

5- Cambiar formulario Operador Ternario
<div className="col-4">
        <h4 className="text-center">
          {
            modoEdicion ? 'Editar Tarea' : 'Agregar Tarea'
          }
        </h4>

 6- Boton agregar /editar
 {
 modoEdicion ? (
   <button className="btn btn-warning btn-block" type="submit">Editar</button>
 ) : (
   <button className="btn btn-dark btn-block" type="submit">Agregar</button>
 )
}

 7- Agregar value de tarea al input para editar
const editarTarea = (item) => {
    //console.log(item)
    setModoEdicion(true)
    setTarea(item.nombreTarea)
  }

 8-
<form onSubmit={ modoEdicion ? editaTarea : agregaTarea}>

 9-
const editaTarea = (e) => {
    e.preventDefault()
    if(!tarea.trim()){
      console.log('Este campo está vacío')
      return
    }
  }

10- Nos falta el ID para modificar el elemento en cuestion
 Crear un nuevo state que se llame id
const [id, setId] = React.useState('')

11- En editarTarea (la 1ra funcion) le pasamos ese id

const editarTarea = (item) => {
    //console.log(item)
    setModoEdicion(true)
    setTarea(item.nombreTarea)
    setId(item.id)
  }


 12- Modificar el array
const editaTarea = (e) => {
    e.preventDefault()
    if(!tarea.trim()){
      console.log('Este campo está vacío')
      return
    }
    const arrayEditado = tareas.map(
      item => item.id === id ? {id:id, tarea:nombreTarea} : item
    )
    setTareas(arrayEditado)
  }


const editaTarea = (e) => {
    e.preventDefault()
    if(!tarea.trim()){
      console.log('Este campo está vacío')
      return
    }
    const arrayEditado = tareas.map(
      item => item.id === id ? {id:id, nombreTarea:tarea} : item
    )
    setTareas(arrayEditado)
    setModoEdicion(false)
    setTarea('')
    setId('')
  }

<ul className="list-group">
            {
              tareas.length === 0 ? (
                <li className="list-group-item">No hay tareas</li>
              ) : (
                tareas.map( item => (
                  <li className="list-group-item" key={item.id}>
                  <span className="lead">{item.nombreTarea}</span>
                  <button 
                  className="btn btn-danger btn-sm float-right mx-2"
                  onClick={ () => eliminarTarea(item.id) }
                  >
                    Eliminar
                  </button>
                  <button 
                  className="btn btn-warning btn-sm float-right"
                  onClick={ () => editarTarea(item) }
                  >
                    Editar
                  </button>
                  </li>
                ) )
              )
              
            }
          </ul>

Edicion de errores de formulario
1-

const [error, setError] = React.useState(null)

2-
const agregaTarea = (e) => {
    e.preventDefault()
    if(!tarea.trim()){
      console.log('Este campo está vacío')
      setError('Escriba algo, porfavor...')
      return
    }
    setTareas([
      ...tareas,
      {id: shortid.generate(), nombreTarea: tarea}
    ])
    console.log(tarea)
    setTarea('')
  }

3-
const editaTarea = (e) => {
    e.preventDefault()
    if(!tarea.trim()){
      console.log('Este campo está vacío')
      setError('Escriba algo, porfavor...')
      return
    }
    const arrayEditado = tareas.map(
      item => item.id === id ? {id:id, nombreTarea:tarea} : item
    )
    setTareas(arrayEditado)
    setModoEdicion(false)
    setTarea('')
    setId('')
  }

4-
<form onSubmit={ modoEdicion ? editaTarea : agregaTarea}>
          {
            error ? <span className="text-danger">{error}</span> : null
          }

5-
const agregaTarea = (e) => {
    e.preventDefault()
    if(!tarea.trim()){
      console.log('Este campo está vacío')
      setError('Escriba algo, porfavor...')
      return
    }
    setTareas([
      ...tareas,
      {id: shortid.generate(), nombreTarea: tarea}
    ])
    console.log(tarea)
    setTarea('')
    setError(null)
  }

y...

const editaTarea = (e) => {
    e.preventDefault()
    if(!tarea.trim()){
      console.log('Este campo está vacío')
      setError('Escriba algo, porfavor...')
      return
    }
    const arrayEditado = tareas.map(
      item => item.id === id ? {id:id, nombreTarea:tarea} : item
    )
    setTareas(arrayEditado)
    setModoEdicion(false)
    setTarea('')
    setId('')
    setError(null)
  }


Poner proyecto en produccion en hosting gratis en la nube

https://app.netlify.com/teams/yamilapros/sites

En terminal:
Terminamos con el servidor
npm run build
Se creo la carpeta build
Cada vez que se hace un cambio hay que ejecutar npm run build
Sobre la carptea: Reveal in file explorer
La arrastramos a la pagina y nos da un link gratuito !. ;)
csdcdcsd
en No hay comentarios:

martes, 11 de agosto de 2020

Webpack Base

1 - CREANDO UN PROYECTO DE NODE

 1- Crear carpeta en escritorio webpack-base
2- Abrir en visual studio Code
3- Abrir terminal
4- Ir a la carpeta actual
5- Comprobar NODE :
node --version
6- Comprobar NPM
npm --version
7- Crear archivo package.json
npm init
8- Todo enter
Se creo package.JSON !

npm init ----------- package.json

========================================================

2-NECESIDAD DEL WEBPACK(IMPORT)

Crear en el directorio raiz del proyecto carpeta llamada
src
Dentro de ella:
carpeta js ---> dentro archivo componentes.js
index.html
index.js
(Es una convencion porque webpack va a buscar la carpeta src)

En el index.html vamos a llamar desde srcipt src al archivo index.js

En componentes.js me voy a crear una funcion que se llame saludar:
const saludar = ( nombre ) => {
    console.log('Creando etiqueta h1');
    const h1 = document.createElement('h1');
    h1.innerText = `Hola, que tal, ${ nombre }`;
    document.body.append(h1);
}

Ahora, la voy a llamar desde el index.js con el import !!!!

import { saludar } from './js/componentes';

saludar('Camilo');
saludar('Yamila');

Y en el index.html tengo:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack base</title>
</head>
<body>
    <script src="index.js"></script>
</body>
</html>

Ahora, se me rompe la aplicacion si uso el import !.
Y lo necesito para tener separado el codigo, los componentes por un lado.

3-INSTALACION Y CONFIGURACION DEL WEBPACK POR DEFECTO

WEBPACK
Nos vamos a la pagina oficial.
Guides
Getting started

Vamos a instalarlo.
Nos vamos a nuestra terminal.
Y tenemos que estar en la misma carpeta del package.json, en el directorio raiz.
Vamos a escribir para ello en consola
dir
Tenemos que ver el package.json, estamos en la misma carpeta.
Vamos a escribir el comando:

npm install webpack webpack-cli --save-dev
L estamos diciendo que lo ponga en una version de desarrollo, porque el webpack NO VA A PRODUCCION !

Listo, vamos a ver que se crearon dependencias de desarrollo en el package.json

"devDependencies": {
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }


Y creó tambien el

node_modules

Ahora, tenemos que ir al package.json y escribir esta linea:
"build": "webpack"
Asi:
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

Le estoy diciendo:
Cuando ejecute BUILD dispara WEBPACK con mi CONFIGURACION POR DEFECTO

VA A BUSCAR LA CARPETA JS, VA A MINIFICAR Y COMPRIMIR LOS ARCHIVOS Y DEJARLOS LISTOS PARA PRODUCCION.

Vamos a la terminal:
dir (para ir al directorio raiz)

npm run build

webpack Creo la carpeta

dist

Y dentro
main.js

Alli esta el codigo minificado y ofuscado

 EL MAIN.JS ES EL BUNDLED, la aplicaion de js tal cual

Es la app js tal cual, con todos los archivos de js en una unica importacion

Entonces, en el index.html yo voy a llamar a main.js (ya que tiene todo el js de mi app)

<script src="../dist/main.js"></script>

Ahora, tengo que decirle a mi funcion saludar de que quiero que se vea en el resto de la app, asi:

EXPORT:

export const saludar = ( nombre ) => {

Guardo los cambios y vuelvo a ejecutar :

npm run build

 Voy a mi navegador, recargo y funciona !.

 Hasta ahi es la configuracion por defecto de Webpack:
-funciona en el navegador
-Funciona export e import
-Pero tengo que guardar cambios y luego siempre hacer npm run build para que se
vean los cambios.

3-ARCHIVO DE CONFIGURACION DE 

 WEBPACK(PASAR CARPETAS)

La carpeta dist

Si yo la borro y vuelvo a ejecutar npm run build se me crea de nuevo.
Esta carpeta es la que vamos a subir A PRODUCCION.
Por eso, es que alli deberia tener el index.html

 ! ! ! - Tengo que hacer un archivo de configuracion de webpack

En la carpeta raiz:
webpack.config.js

module.exports = {
    
}

Alli vamos a hacer la configuracion.
1- "mode" va a ser "developer" estamos en desarrollo (tener comentarios, etc)
2- "module" : donde empieza la configuracion del webpack
3- Dentro de "modules" vienen las reglas:
module.exports = {
    mode: 'development',
    module: {
        rules: [
            
        ]
    }
}
4- Yo quiero que mi index.html este dentro de la carpeta dist (distribucion), voy a escribir en consola:
En este punto voy a la terminal y escribo:

npm i -D html-loader html-webpack-plugin
npm i -D html-loader html-webpack-plugin
Esto hace dos cosas:
       a- index.html me la lleva al bundled (dist)
       b- Y que incruste el budled en el index
Ahora podemos ver dicho paquetes en las dependencias en package.json

 "html-loader": "^1.2.0",
 "html-webpack-plugin": "^4.3.0",

5-Seguimos con las reglas:
module.exports = {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: 'html-loader',
                options: {
                    attributes: false
                },
            }
        ]
    }
}

6- Con "test" le estamos diciendo que aplique a archivo "html"
7- Voy a cargar arriba un paquete, arrriba del todo del archivo:

const HtmlWebPackPlugin = require('html-webpack-plugin');

8- Ese paquete lo voy a cargar en "Plugins", le voy a especificar los plugins que yo quiero
9- El "Template" le voy a decir que "archivo quiero tomar"
10- "filename" hacia donde quiero llevarlo 
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: 'html-loader',
                options: {
                    attributes: false
                },
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        }),
    ]
}

11-Guardo cambios, borro el dist  y ejecuto en terminal:
12- npm run build

13- Vamos a ver ahora en la carpeta "dist" me ha puesto el archivo "index.html".

14- Si miro ese archivo, tengo 2 importaciones de js.

15- Ahora, si me voy a "src", "index.html" esa importacion no me va a servir, la voy a borrar:
En "src" ---> "index.html" --> Borro la importacion js

 Y ahora hago en terminal "npm run build"

 Ahora, si abro mi "Index.html" del "dist" en el navegador esta funcionando perfecto!.



3-WEBPACK DEV SERVER(NO MAS NPM 

RUN BUILD)

VAMOS A CONFIGURAR UN SERVIDOR DE DESARROLLO ! 


NO TENER QUE HACER MAS: NPM RUN BUILD 
REFRESCAR DE MANERA AUTOMÁTICA

Si yo hago un cambio en components.js y lo guardo, no lo voy a ver hasta que no haga npm run build.
Vamos a instalar un paquete que me cambie eso.
Asi se ven los cambios al instante
Instalamos EL SERVIDOR DE DESARROLLO DE WEBPACK

En la terminal:

npm i -D webpack-dev-server

Ahora, si me voy al package.json, en las dependencias esta, ahora vamos a escribir un nuevo script:
Tenemos que configurar alli un SERVIDOR DE DESARROLLO que la ruta que esta en el browser se vea lo mas parecida a lo que vamos a ver en produccion: http:// o htpps://

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },

En terminal:

npm start

Y se refresca de manera automatica si hacemos cambios
HACE EL NPM RUN BUILD DE MANERA INSTANTANEA
NO CERRAR LA TERMINAL ! ! ! ! 

 Se tiene que ver esto en consola:
[WDS] Live Reloading enabled.

 Ahora, todos los cambios que guardo se refresca automáticamente el navegador.
Esta corrriendo la app en http://localhost:8080/

CAMBIAR PUERTO:
Si el puerto esta ocupado:
   "start": "webpack-dev-server --open --port=8081"

Y control c en terminal para poder escribir
Y otra vez:
npm start




4-IMPORTANDO ESTILOS DE FORMA 

DINÁMICA


Hay 2 formas de trabajar con estilos:
1-Cargar estilos de manera dinámica
2-Tener estilos globales.

Click derecho en "src" ---> Crear carpeta "css" -->  Crear archivo "componentes.css"

El mismo nombre de componentes.js pero para el css.

Vamos a agregar estilos para el h1 muy básicos:
h1{
    color: red;
}

Si no tenemos abierta la app, con poner "npm start", nos lanza la app en el browser.

Hay que decir a Webpack que mueva ese archivo y lo COLOQUE EN EL BUNDLED DE LA APP.

1- Vamos a decirle que importe ese "componentes.css" cuando requerimos el "componentes.js"
Para eso vamos a tener que instalar un para de paquetes:
"css-loader" nos va a permitir minificarlo, inyectarlo para ponerlo en nuestro bundled.
Y el "style-loader".
Entre los dos van a hacer el trabajo.
En terminal:
npm i -D css-loader style-loader

Vamos a ver que estan instalados en el paquete de dependencias:
"css-loader": "^4.2.1",
    "html-loader": "^1.2.0",
    "html-webpack-plugin": "^4.3.0",
    "style-loader": "^1.2.1",

A - "IMPORTAR"  Ahora, en mi "componentes.js" voy a importar ese archivo css:

import '../css/componentes.css';

export const saludar = ( nombre ) => {
    console.log('Saludando desde console');
    const h1 = document.createElement('h1');
    h1.innerText = `Mi nombre es ${ nombre }`;
    document.body.append(h1);
}

B- "CONFIGURAR"
Vamos a nuestro archivo de configuracion "webpack.config.js" y vamos a escribir un par de reglas.
rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },

Entero:
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.html$/i,
                loader: 'html-loader',
                options: {
                    attributes: false,

minimize: false
                },
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        }),
    ]
}


Ahora,
1-Vamos a borrar la carpeta "dist"
2- Ejecutamos "npm run build"
3-Si vamos a "dist" --> "main.js" y buscamos(ctrl + f ) "red" (nuestro estilo del h1) vamos a ver que aparece y que nos lo esta importando como si fuera una libreria de javascript.
4- Abrimos otra vez "npm start"
Lo esta aplicando de manera dinámica.

Ahora se guardan los cambios del CSS de manera dinámica.



4-CREANDO ARCHIVO DE ESTILOS DE 

FORMA GLOBAL EN LA APP


A-Crear "Main.css" en "dist"

Vamos a crear un archivo global de CSS en mi app.
Y que ese archivo global este importado en mi archivo de index.html y en mi carpeta de distribucion(dist).

1- En la carpeta "src" voy a crearme un archivo "styles.css".
En muchos frameworks es asi, si por ejemplo le pongo un color de fondo negro, y recargo no me esta aplicando los estilos.
Tengo que decirle que tiene que cargar los estilos.

2- Me voy a "Index.js" en "src" y le voy a decir que cargue los estilos, asi:
import { saludar } from './js/componentes';
import './styles.css';

const nombre = 'Max';
saludar(nombre);

Ahora, se me aplican los cambios, y si me voy a "Main.js" y lo busco (ctrl + f) lo voy a encontrar, sigue cargandose como una libreria, pero yo quiero que ese archivo este en "dist", de manera independiente y que tambien lo coloque en el index de "dist"

3-Para eso vamos a hacer unas instalciones, vamos a instalar un plugin:
En terminal:
 npm i -D mini-css-extract-plugin

Cuando dice "Plugin" tenemos que hacer algo muy parecido a lo anterior, en el archivo "webpack.config.js":

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

Y 4- Vamos a poner otra regla adicional, porque aunque es CSS voy a tener que usarlo de otra manera diferente:
{
  test: /styles\.css$/,
  use: [
     MiniCssExtractPlugin.loader,
     'css-loader'
   ]
},

Y ese archivo css , que es el styles, lo vamos a excluir arriba porque sino, al aplicarle la regla arriba (ya que es un archivo css) nunca llegaria a esta regla:
{
                test: /\.css$/,
                exclude: /styles\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },

Y abajo, le digo como va a atrabajar:

 new MiniCssExtractPlugin({
            filename: '[name].css',
            ignoreOrder: false
 })


Completo, el archivo de "webpack.config.js" quedaria asi:
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /styles\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /styles\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.html$/i,
                loader: 'html-loader',
                options: {
                    attributes: false,
minimize: false
                },
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css',
            ignoreOrder: false
        })
    ]
}


Por ultimo, en terminal:

npm run build

Me acaba de CREAR "MAIN.CSS" EN "DIST"

B-Minimizar "main.css" (para despues para 

 produccion)

Si yo ahora escribo en webpack.config.js : "production" en vez de "development"
y ahora corro el "npm run build" y voy a "main.css" voy a ver que no esta minificado.
Para eso tengo que instalar otro paquete.
Me voy a la terminal:
npm i -D optimize-css-assets-webpack-plugin

Ahora, en "webpack.config.js" vamos a cargar arriba el plugin, (como todos los plugins)

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

Abajo de mode:

optimization: {
        minimizer: [ new OptimizeCssAssetsWebpackPlugin() ]
    },

Y si ahora corro el "npm run build" voy a ver que esta minificado el css.
Si despues lo pongo en mode "development" y corro "npm run build" ya me va a dejar normal el archivo.


5- MANEJO DE IMÁGENES

 1- Dentro del directorio "src" vamos a crear un directorio llamado "assests" y dentro vamos a guardar una imagen cualquiera de la web.
2- Ahora, la coloquemos en el html:

<img src="./assets/imagen.png" alt="">

Ahora, no se ve, tenemos que decirle al webpack que queremos trabajar con imágenes.
Tenemos que instalar algo, vamos a la terminal:

 npm i -D file-loader

 Ahora, vamos a "webpack.config.js" y vamos a fijar una regla, vamos a decirle que evalue cualquier cosa que yo quiera mover, cualquier assets.

{
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            esModule: false
                        }
                    }
                ]
            }

Ahora, tenemos que instalar otro paquete, porque asi no va a funcionar:

En la terminal:
npm i copy-webpack-plugin --save-dev

Ahora vamos a hacer una pequeña configuracion en "webpack.config.js"
const CopyPlugin = require('copy-webpack-plugin');
Abajo:
new CopyPlugin([
            { from:'src/assets', to: 'assets/' }
        ])

Total:

const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    mode: 'development',
    optimization: {
        minimizer: [ new OptimizeCssAssetsWebpackPlugin() ]
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /styles\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /styles\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.html$/i,
                loader: 'html-loader',
                options: {
                    attributes: false,
                    minimize: false
                },
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            esModule: false
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css',
            ignoreOrder: false
        }),

        new CopyPlugin({
            patterns: [
                { from:'src/assets', to: 'assets/' },
            ],
        }),
    ]
}

-Borrar carpeta "dist".
-npm start
-Ahi tenemos la imagen !.

(NO ME CREA CARPETA ASSETS EN DIST).


6- PRODUCTION MODE
Me voy a "webpack.config.js", escribo en "mode" "production", corro "npm run build", si veo el main.js no esta minificado, el css si.

-Crear un nuevo archivo en raiz que se llame "webpack.prod.js" donde TENGAMOS LA CONFIGURACION SOLO DE PRODUCCION.

-Copiar todo lo de "webpack.config.js" a "webpack.prod.js" y cambiamos algunas cosas:
1- 'development' a 'production'.
2- Output , filename: main.abc.js (abc para ponerle algo, ira un hash).

module.exports = {
    mode: 'production',
    optimization: {
        minimizer: [ new OptimizeCssAssetsWebpackPlugin() ]
    },
    output: {
        filename: 'main.abc.js'
    },

Y en "package.json" le vamos a especificar el nombre del archivo.

"build": "webpack --config webpack.prod.js",

Ejecuto "npm run build" (podemos borrar antes "dist" para ver bien los cambios).

Ahora veo en "dist" que esta el "main.abc.js".

Y ahora si no quiero perder la configuracion de desarrollo, escribo ahi mismo en "package.json":

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "build:dev": "webpack --config webpack.config.js",
    "start": "webpack-dev-server --open"
  },

Ahora "npm run build" ya hora me aparecen en "dist": "main.js" y "main.abc.js".

Ahora, para que se actualize la cache en el navegador del cliente, webpack nos crea el "contentHash".
Lo escribimos asi:

    output: {
        filename: 'main.[contentHash].js'
    },

npm run build

Se creo un nuevo archivo main con ese hash.

Vamos a hacer lo mismo con el CSS:

 new MiniCssExtractPlugin({
            filename: '[name].[contentHash].css',
            ignoreOrder: false
        }),

npm run build

Y esta.


6- INSTALACION Y CONFIGURACION DE 

 BABEL
Todavia tenemos 2 problemas:
1-Si estamos en un navegador muy viejo, todavia no soporta las constantes y me va a dar un error.
2-Tenemos que arreglar lo que nos minifique el main.js (solo minifica el main.css).

BABEL nos pasa del codigo moderno al codigo antiguo de Js para que lo soporten todos los navegadores.

1-Ir a Babel.
2- Ir a Setup
3- Ir a Webpack

Vamos a la terminal y pegamos esos comandos:

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

Ahora me voy a "webpack.prod.js".
Vamos a crear una nueva regla y como Babel trabaja con Js solo va a afectar a los archivos de Js.
Escribimos nueva regla:
Copiamos tambien de la web de Babel:

module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }

Pero queda asi: (con el use)

rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader'
                ]
            },

Ahora vamos a CONFIGURAR BABEL.
Crear archivo ".babelrc"
-Ir a pagina de Babel, click en ".babelrc", click en "minify" en "install"
(Buscamos en la web "babel present minify" y copiamos lo de "install" en la terminal.

npm install babel-preset-minify --save-dev

En el archivo ".babelrc" pegamos:
{
    "presets": ["minify"]
}

ahora aparece ofuscado el codigo, pero tenemos que instalar otro paquete que haga que el codigo se haga como en ECMA script 5, que es soportado por todos los navegadores.

Vamos a buscar en web:
babel-minify-webpack-plugin (en github)
Copiamos y pegamos el install en la terminal: INSTALL
npm install babel-minify-webpack-plugin --save-dev
Y despues vemos el Usage, vamos a hacerle caso: USAGE
En "webpack.prod.js":

const MinifyPlugin = require("babel-minify-webpack-plugin");
Y en los plugins:
new MinifyPlugin()

Ya lo ultimo (ya esta minificado, ahora para que lo pase al ecma script 5), buscamos en google:

@babel/preset-env
INSTALL:

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

Y en ".babelrc":

"@babel/preset-env"

 Quedaria asi:
{
    "presets": ["@babel/preset-env", "minify"]
}

npm run build

Y ya podemos ver que en nuestro archivo main.js ya esta "var" ya no esta "const", eso quiere decir que ya lo paso al ecmasrcipt 5.


6- BORRANDO LA CARPETA DIST

 Cada vez que yo ejecuto el npm run build me va creando archivos "main.js".
En la pagina de "webpack" en la zona de "cleaning up the /dist folder".
https://webpack.js.org/guides/output-management/

INSTALL:
npm install --save-dev clean-webpack-plugin
Y vamos a configurarlo en "webpack.prod.js":

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
Y en la parte de los plugins:
new CleanWebpackPlugin(),
Ejecuto npm run buils y se borra todo.
Completo el codigo de "webpack.config.js":

const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    mode: 'development',
    optimization: {
        minimizer: [ new OptimizeCssAssetsWebpackPlugin() ]
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /styles\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /styles\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.html$/i,
                loader: 'html-loader',
                options: {
                    attributes: false,
                    minimize: false
                },
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            esModule: false
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css',
            ignoreOrder: false
        }),
        new CopyPlugin({
            patterns: [
                { from:'src/assets', to: 'assets/' },
            ],
        }),
    ]
}

Completo el coidgo de "webpack.prod.js":
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

const CopyPlugin = require('copy-webpack-plugin');

const MinifyPlugin = require("babel-minify-webpack-plugin");

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: 'production',
    optimization: {
        minimizer: [ new OptimizeCssAssetsWebpackPlugin() ]
    },
    output: {
        filename: 'main.[contentHash].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader'
                ]
            },
            {
                test: /\.css$/,
                exclude: /styles\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /styles\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.html$/i,
                loader: 'html-loader',
                options: {
                    attributes: false,
                    minimize: false
                },
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            esModule: false
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[contentHash].css',
            ignoreOrder: false
        }),
        new CopyPlugin({
            patterns: [
                { from:'src/assets', to: 'assets/' },
            ],
        }),
        new MinifyPlugin(),
        new CleanWebpackPlugin(),
    ]
}


7- CONFIGURACION DE GIT EN NUESTRO 

 EQUIPO

En la terminal, para iniciar proyecto en Git:

git init

Creamos nuevo archivo:
.gitignore
Y alli vamos a decirle que archivos queremos que ignore:
node_modules/

dist/

Y ahora no va a estar pendiente de esos archivos, se ponen en gris (el archivo dist se ejecuta a traves de los comandos build del package.json).

- Git: preparate para tomar una foto a todos los archivos:
git add .

-Para tomar la fotografia:
git commit -m "Primer commit"

-A partir de aqui ya puedo recuperar mi proyecto completo, por ejemplo borro "src", ahora escribo:

git checkout  -- .

Y recupero todo.


8- DESPLEGAR PROYECTO A GITHUB

GITHUB:
-Crear nuevo repositorio

-Vamos a usar los dos comandos de "...or push an existing repository..."

el git remote y el git push origin master
.Listo


---------------------------------------------------------------------------------------------------------------

README (Es como un html)

-En el proyecto:
Crear archivo:
README.md

Creamos nombre a proyecto:
# Webpack Base

# Webpack Base

Este es el poryecto base o inicial para crear aplicaciones utilizando Webpack.

### Notas:
Recuerden reconstruir los módulos de Node:
```
npm install
```

Y para construir el build, recuerden:

```
npm run build
```


9- GITHUB PAGES

 Si yo quiero subir mi aplicacion no lo va a hacer.
Porque Github pages solo sube html, css y Js (react, angular y vue si), pero Node, Php, Java NO.
Solo html, Css y Js.

Ahora, entonces yo tendria que subir mi "Dist" que es la carpeta de produccion, pero no deberia subirlo porque es el producto del build.
Tenemos que crear, nos explica, un /docs

En terminal:
npm run build

-Voy a renombrar "dist" a "docs".
-Si hago git status me va a decir que hay un nuevo directorio que necesita que le hagan seguimiento.
-
git add .
git commit - m "docs creado"
git push


Ahora, me voy a Github, Settings, Github Pages, selecciono "master brunch"

en No hay comentarios:
Suscribirse a: Entradas (Atom)

Creando plugin Wordpress - 03

  11- USUARIOS -Para crear un usuario lo mas facil desde el admin- FUNCIONES PARA AGREGAR USUARIO: wp_create_user ( string  $username , stri...