Clase 5 de 16 • Curso de Single Page Application con JavaScript Vanilla
Contenido del curso
Fernando Vallejo
Karla
Alberto Gómez Juan
Ian Vassallo
Uriel Alberto Arevalo Franco
Ian Vassallo
Reynaldo Francisco Moreno Briceño
jonathan gonzalez
Gabriel Andres Fajardo Ortiz
Milena Castro Correa
Jose Morales Varon
Jhonanderson Tellez Parra
Luis Angel Rojas Estevez
Oscar Barajas Tavares
Luis Angel Rojas Estevez
Amir Salva
Manuel Araujo
Carlos Rosado
Jimmy Buriticá Londoño
Gonzalo Vidal
Larry Caycho
Gonzalo Vidal
Victor Alvarado
Gabriel Leonardo Forero Perea
Jairo Merea Dueñas
Roberto Carlos Martinez Loredo
Luis Collymoore
Maria Vivancos Garcia
MTM
Cristian Parra
Carlos Roberto Villatoro Barrios
Samuel Daza
Enzo Ivan Valdez
Josue Fredes
Manuel Roberto Serrano Torres
Vicente Benavides
Antony Jose Cabeza Rauseo
Raul Armas
Alex hernandez mitre
Octavio Villavicencio Cruz
Kevin Jiménez Osorno
Sergio Brandon De Lucio Chavero
Jhon Carlos Colorado Angulo
Oscar Barajas Tavares
Jhon Carlos Colorado Angulo
Alejandro Ruiz Melo
Alex hernandez mitre
Manuel Araujo
Levi Nuñez
Fernando Cordero
Valentina Arenas Lozano
Kevin Giovanni Cano Blanco
Script correcto.
"scripts": { "build":"webpack --mode production", "start": "webpack-dev-server --open --mode development" },
webpack,config.js
const path = require('path'); const HtmlWebPackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname,'dist'), filename: 'main.js' }, resolve: { extensions: ['.js'] }, module:{ rules:[{ test: /\.js?$/, exclude: /node_modules/, use:{ loader: 'babel-loader' } }] }, plugins: [ new HtmlWebPackPlugin([ { inject: true, template: './public/index.html', filename: './index.html', } ]) ] }
Gracias!!
Había un typo en el mode de built. Gracias!!
Si el main en dist te crea solo con el console.log("Hello"), esto se debe a un problema con las versiones de Webpack Haz lo siguiente en la terminal (en el current workspace): `
npm uninstall wepback npm uninstall wepback-cli
`
Lo que pasó fue que borraron las versiones desactualizadas Ahora se intalará lo correcto con el siguiente comando: `
npm i webpack@4 webpack-cli@3 `
Esta solución la encontró marcelo-vargas-avila, pero como estaba en un hilo aparte decidí ponerla acá jaja
Ok, funcionó. Gracias, IanVass. No se si el profe Oscar haya realizado algún aporte en el pasado para terciar en este tema. Si no, me parecería interesante leerlo por acá. Bueno saber por qué suceden estos líos. Me tomó un par de horas resolverlo. Quedo con la sensación de me pasará de nuevo sin saber exactamente como proceder.
Ntp de hecho estoy llevando el curso de npm y ya comprendí. Es un problema de las versiones de compatibilidad que surge al instalar webpack, de hecho creo que más adelante hay que actualizar webpack otra vez a la versión 5 (según recuerdo jaja), ya que instalamos otro plugin que tiene que ser compatible con webpack. Lo interesante es que este tipo de errores se comprenden si se lee lo que falla. Cuando me encontré con el problema más adelante creo que decía que una función No estaba definida en una dependencia y que se usaba en un (según recuerdo) plugin de esta, entonces al recordar los pasos, te das cuenta que tiene que ser un problema de versiones jaja.
Para los que tienen el problema que tras correr el comando "npm run build" el arcivo main.js les queda igual que el archivo index.js aca esta el ¿por que?...
1)Tras la actualizacion a webpack 5 debemos instalar las siguientes dependdencias de babel: "npm install @babel/core babel-loader @babel/preset-env".
2)Luego debemos generar en la raiz del proyecto el archivo "babel.config.json" alli debemos agregar lo siguiente:
{ "presets": [ "@babel/preset-env" ] }
{ // Estructura de Babel test: /\.m?js$/, //Nos permite identificar los archivos según se encuentran en nuestro entorno. exclude: /node_modules/, //Excluimos la carpeta de node modules use: { loader: 'babel-loader',//Utilizar un loader como configuración establecida. } }
Al llegar a este paso y correr el comando "npm run build" se daran cuenta de que sigue igual el resultado de main.js, y es porque tras la actualizacion, babel solo agrega el resto de codigo cuando usamos sintaxys moderna de JavaScripts.
Como prueba agreguen el siguiente codigo en el archivo index.js:
console.log("Hello webpack!"); const fancyFunc = () => { return [1, 2]; }; const [a, b] = fancyFunc();
Ahora compilen y veran que el archivo main.js si viene completo, porque estamos empleando una arrow function y es necesario hacer el codigo compatible con el resto de navegadores..
uffff casi que no!! Gracias men, saludos, me ayudo mucho
Crack!! Muchas gracias amigo, este si me ayudo hoy dia 21 de mayo del 2021. 💪
Alguien sabe porque mi main.js se creó solo con el console.log('Hello');
es normal? Es que a Oscar se le creó con más código.
Me pasa lo mismo, ¿es normal esto?
estoy en las mismas, ayuda.
Les comparto esta herramienta online que nos ayuda para crear un archivo .gitignore https://www.gitignore.io/
Gran recurso, también sirve para entender que tipo de archivos se generan en diferentes tipos de proyectos.
A si es, me ayuda mucho en mis proyecto, una maravilla de herramienta
Este curso y el de webpack deben ser revisados urgentemente para su actualizacion.
Por favor
al día de hoy este script no funciona
"scripts": { "dev": "webpack-dev-server --open --mode development" },
en mi caso fue posible de esta forma
"scripts": { "dev": "webpack serve --open --mode development" },
esta configuración también la puedes crear en webpack
mode: 'development', devServer: { port: 9000, open: true },
nuestro script quedaría de la siguiente forma
"scripts": { “dev”: “webpack serve” },
Gracias Carlos, con esto solucione el primer problema.
Siento que no entiendo ni mergas... había dejado js por una semana por hacer el curso de mobile first y por que estuve en cama, pero siento que está muy complejo esto, no se si es el profe o yo, no se como hay gente que le entiende todo, serán nuevos o ya habrán visto esto con otros profes, en la vida real, etc...justo hoy veía el video de Freddy donde hablaba de la decepción realista, y hay que sobrepasarlo que es crucial ese punto, se me aparecen de vez, en cuando y seguirán haciéndolo seguro...no quiero quedarme solo en html, css y js básico la verdad, así que continuaré...
Me acuerdo que hace unos meses pensé lo mismo, hoy estoy haciendo el curso nuevamente y ahora lo tengo claro. Lo que pasa es que ese sentimiento que tienes es de las cosas que no sabes. Conforme investigues por tu cuenta verás que hay cosas que comienzan a tomar sentido. Por ejemplo esa configuración que dice package.json es un formato de intercambio de datos conocido como JSON. Lo vas a entender después de ver este video.. . Para ampliar el tema sobre SPA. Aquí tienes otro ejercicio -->. . Recuerda practicar lo aprendido, has una SPA por tu cuenta. . Lleva estos también que te van a servir para muchas cosas más aparte de las SPA. --> https://platzi.com/clases/npm/ --> https://platzi.com/clases/terminal/
Siempre investiga por tu cuenta. Verás que cuando encuentras las respuestas ya no sentirás esa frustración. Saludos espero te sirva.
Gracias larrykevin23 por tomarte el tiempo de contestar y apoyar con material, sigo adelante, ahora sé que a la primera vez que vea algo nuevo, es muy probable que no lo entienda, supongo que todos o casi todos necesitamos ver ciertas cosas más de 1 vez para entenderlas : )
Actualizado a diciembre del 2021
Comando para instalar las dependencias:
npm i @babel/core babel-loader @babel/preset-env html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev
Configuraciones para el archivo webpack.config.js:
// Permitir traer path. Acceder dentro de la carpte no importa el lugar donde se encuentre const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' }, resolve: { extensions: ['.js'], }, module: { rules: [ { test: /\.js?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', {targets: "defaults"}] ] } } } ] }, plugins: [ new HtmlWebpackPlugin([ { inject: true, template: './public/index.html', filename: './index.html' } ]) ] }
Scripts en el archivo package.json:
"build": "webpack --mode production", "start": "webpack-dev-server --open --mode development"
Muchas gracias hermano, gracias a ti puedo continuar el curso :)
MI SOLUCIÓN PARA LOS PROBLEMAS QUE TUVE AL HACERLO EN EL 2021
1.- INICIE DESDE 0 E INSTALE CADA UNO DE LOS COMPONENTES QUE NECESITABA EN FUNCIÓN DE LA INFORMACIÓN DISPONIBLE, CON ESTOS CODIGOS
npm install -D babel-loader @babel/core @babel/preset-env --save-dev npm i webpack@4 webpack-cli@3 npm install --save-dev html-webpack-plugin npm install --save-dev webpack-cli
2.- EL FORMATO DEL ARCHIVO WEBPACK.COFIG LO HICE SOLO CON UNA LEVE MODIFICACIÓN
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { path: __dirname + '/dist', filename: 'main.js' }, resolve: { extensions: ['.js'], }, module: { rules: [ { test: /\.m?js$/, exclude: /node_modules/, use: { loader: 'babel-loader', } } ] }, plugins: [ new HtmlWebpackPlugin([ { inject:true, template:'./public/index.html', filename: './index.html' } ]) ] }
Gracias bro, despues de tanto tiempo el unico tutorial que me ayudo fue el tuyo, tambien si alguien tiene demasiados problemas haga lo que Jairo inicie desde 0 y siga los pasos que aqui menciona y si estan en Windows ejecuten el cmd como administrador y cierren los archivos mientras instalan todo, eso me ayudo a mi.
Muchas gracias
AGOSTO 2021. He recopilado soluciones.
Si el archivo main.js se te queda igual y no se te crea el archivo index.html. Haz esto:
npm uninstall wepback npm uninstall wepback-cli npm uninstall html-webpack-plugin
npm i webpack@4 webpack-cli@3 npm i html-webpack-plugin@4
Vuelve a probar.
sos un dios asjkldfjsadhfhjkasdf muchas gracias
Esto debería estar como pin de los primeros, en el 2022 esta vigente saludos
Los comando que recomiendo Iván están bien pero ahora surge el problema de que no son compatibles con el html-webpack-plugin, pero es fácil resolverlo:
desístala el html-webpack-plugin con:
y ahora instala la versión compatible con webpack:
y listo vuelve a correr tu npm run build y todo de maravilla.
Muchas gracias Carlos, me ha funcionado tu recomendación al dia de hoy: 18/jul/2021, se ha creado la carpeta BUILD 😀
Para Desinstalar:
npm uninstall html-webpack-plugin
Para instalar versión mas reciente desde NPM:
npm i --save-dev html-webpack-plugin@4
Finalmente corre con exito el comando: npm run build
Veo una inconsistencia a la hora de las dependencias instaladas, todas están desactualizadas y no existe un lugar en los cursos donde den una respuesta rápida para poder seguir con el curso, comprendo que fomenta la lectura, pero dada las circunstancias de la manera de explicar de los profesores, en varios cursos se mezclan temas que uno no los tocó de cerca, en lo personal me gustaría una red de respuestas más cercana.
muy buena lectura, si es un problema q se repite, sino actualizan los cursos que les den mantenimiento
Para los que les parezca un error por no encontrar index.js a la hora de ejecutar el script build, en mi caso lo resolví poniendo una diagonal en el archivo webpack de esta forma.
entry: './src/index.js',
Muchas gracias.
Gracias!!! Me sirvió esta solución
Sospecho que el profesor arregla ciertos errores sin mostrarlos, varias veces con él me arroja error a lo que a él sí le funciona bien. En este caso no es --modo sino --mode.
así es, los edita con maña y medio raro , además que va muy rápido y no se le entiende.
¿mi main.js me regresa tal cual lo que escribo en el src/index.js?
tendran alguna idea de por que
Se debe a la incompatibilidad de versiones que existen con webpack puedes probar instalando las dependencias exactas que usa el profesor
"devDependencies": { "@babel/core": "^7.7.5", "babel-loader": "^8.0.6", "html-webpack-plugin": "^3.2.0", "webpack": "^4.41.2", "webpack-cli": "^3.3.10", "webpack-dev-server": "^3.9.0" }
Thanks for the information
Qué plugin utiliza para que se le cierren las etiquetas html dentro de las comillas francesas?
Aca comparto mis plugins: https://platzi.com/blog/10-plugins-esenciales-para-vscode/
Gracias.
Para realizar el curso con los módulos actualizados pueden seguir este proceso (fue tomado de varios de los post y de la lectura de la documentación):
npm init -y
npm install @babel/core babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env --save-dev
{ "name": "single-page-application", "version": "1.0.0", "description": "Curso de Platzi - Single Page Application", "main": "index.js", "scripts": { "watch": "webpack --watch", "build": "webpack --mode production", "start": "webpack serve --open --mode development" }, "repository": { "type": "git", "url": "git+https://github.com/kannder83/single-page-application.git" }, "keywords": [], "author": "kannder83 <kannder.ziur@gmail.com>", "license": "MIT", "bugs": { "url": "https://github.com/kannder83/single-page-application/issues" }, "homepage": "https://github.com/kannder83/single-page-application#readme", "devDependencies": { "@babel/core": "^7.14.6", "@babel/preset-env": "^7.14.7", "babel-loader": "^8.2.2", "html-webpack-plugin": "^5.3.2", "webpack": "^5.42.1", "webpack-cli": "^4.7.2" } }
touch webpack.config.js
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: "development", entry: "./src/index.js", output: { filename: "main.js", path: path.resolve(__dirname, "dist"), }, devServer: { contentBase: "./dist", }, plugins: [ new HtmlWebpackPlugin({ inject: true, template: "./public/index.html", filename: "./index.html", }), ], module: { rules: [ { test: /\.m?js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"], }, }, }, ], }, };
touch babel.config.json
{ "presets": ["@babel/preset-env"] }
mkdir src touch src/index.js
npm run build
Puede que el curso este desactualizado, pero véanlo como un reto para seguir.
esto es mejor que toda la clase, esto fue lo que me funcionó ...
Esto ya es otro curso entonces.
Buenas tengo en el main.js me copia exactamente la misma linea de codigo del index.js
alguien tiene alguna solucion
"scripts": { "build": "webpack --mode production", "start": "webpack-dev-server --open --mode development" }
//Nos permite acceder a donde estámos en las carpetas. Ya sea en local o en la nube. const path = require('path'); //Archivo necesario para trabajar con HTML que lo requerimos del paquete que instalamos const HtmlWebPackPlugin = require('html-webpack-plugin'); //Aquí se encuentra toda la configuración de lo que va a suceder y sera el modulo para exportar. module.exports = { //Punto de entrada con su dirección y es aquí donde vive el código inicial y de aquí parte al desarrollo. entry: './src/index.js', //Donde se envía el proyecto estructurado y compilado listo para producción, este sera un objeto output:{ //Ponemos la ruta del lugar donde se exportara el proyecto, usando el path que importamos //con el dirname le decimos que donde se encuentre esta carpeta ahi creara la carpeta dist = distribution path: path.resolve(__dirname, 'dist'), /*le diremos como se llamaremos el archivo que vamos a crear donde estara el compilado final cuando envienmos a produccion*/ filename: 'main.js' }, /*trabajaremos sobre las extenciones que va a utilizar nuestro proyecto donde usaremos resolve generando otro objeto*/ resolve: { /*Pasamos un arreglo de las extenciones que vamos a utilizar*/ extensions: ['.js'], }, /*creamos un modulo con las reglas necesarias de babel*/ module:{ /*estas seran las reglas que pasaremos por medio de un arreglo*/ rules: [ //Elementos que necesitamos { /*Estructura de babel generando un test de como vamos a identificar estos archivos*/ /*test que va a tener regex para establecer valores que queremos filtral de una ruta, de unos elementos o de los archivos que vamos a estar utilizando / punto de entrada - extenciones js */ test: /\.js?$/, //Exluimos la carpeta node_modules y todos los archivos js exclude: /node_modules/, /*utilizamos un loader o una configuracion establecida para trabajar todo nuestro codigo y es que el loader que instalamos de babel*/ use: { loader: 'babel-loader', } } ] }, //necestiamos establecer los plugin que vamos a utilizar /*webpack plugin de html que nos va a permitir trabajar con estos archivos pasando un arreglo*/ plugins: [ /*instanciamos el plugin de html que instanciamos a inicio de este documento, pasandoles un arreglo y despues un objeto que vamos a llenar con la configuracion*/ new HtmlWebPackPlugin([ { //inject como vamos a un archivo html a injectar un valor inject: true, //necesimos un template principal y le damos una ruta de este template base de html template: './public/index.html', /*ahora le decimos donde tiene que guardarlo y seria nuestra carpeta dist donde le damos un nombre*/ filename: './index.html', } ]) ] }```
const Home = () => { const view = ` <div class="Characters"> <article class="Character-item"> <a href="#/1/"> <img src="image" alt="name"> <h2>Name</h2> </a> </article> <div> `; return view; }; export default Home;```
ahorrando escritura <3
Gracias
