Modulando el proyecto usando Browserify

Clase 21 de 61 • Curso de JavaScript y jQuery 2015

Clase anteriorSiguiente clase

Vicente

student•

He disfrutado siguiendo este curso.
Gracias Sacha
Gracias Platzi
Vicent

Arturo Jesus Martínez Sáenz

student•

Para window me funciona el siguiente script:

"scripts": {  
    "public": "md public & cd public & del *.* /F /S /Q",  
    "build-js": "browserify -t [ babelify --presets [ es2015 ] ] src/index.js > public/app.js",  
    "copy-files": "copy src\\index.css public\\app.css & copy src\\index.html public ",  
    "build": "npm run public & npm run build-js & npm run copy-files ",  
    "serve": "serve public"  
  }

Juan Sebastián Zapata

student•

Me sirvió aho tengo el siguiente error:

Error: Cannot find module 'src/tvmaze-api-client' from 'D:\jamarquez\tvify\sr

at D:\jamarquez\tvify\node_modules\resolve\lib\async.js:46:17

at process (D:\jamarquez\tvify\node_modules\resolve\lib\async.js:173:43)

at ondir (D:\jamarquez\tvify\node_modules\resolve\lib\async.js:188:17)

at load (D:\jamarquez\tvify\node_modules\resolve\lib\async.js:69:43)

at onex (D:\jamarquez\tvify\node_modules\resolve\lib\async.js:92:31)

at D:\jamarquez\tvify\node_modules\resolve\lib\async.js:22:47

at FSReqWrap.oncomplete (fs.js:82:15)

Luis Felipe Silgado Cortázar

student•

Lo gracioso del asunto, no funciona con la ruta si usas “/” debes usar “\”, no así en la ruta de src/index.js que si funciona normal.
el mundo está muy loco xD.

Cidesi lm

student•

creo que no vale la pena pagar por este curso tengo windows y no funciona

Ricardo Azpeitia P.

student•

Lamento decepcionarte pero no es el curso, son las herramientas que tienen mejor soporte en sistemas operativos *nix. Así es casi para todas las herramientas que usen node.

Luis Daniel Gordo Navas

student•

Te recomiendo que instales una maquina virtual linux hagas el curso y luego investigas un poco y cambias los comandos para la consola de windows

Sebastian Rojas Parra

student•

para que funcione en windows el NODE_PATH en windows tienes que cambiar

“build-js”: “NODE_PATH=. browserify -t [ babelify --presets [ es2015 ] ] src/index.js > public/index.js”,
POR :

“build-js”: “set NODE_PATH=. browserify -t [ babelify --presets [ es2015 ] ] src/index.js > public/index.js”,

Saludos!

Federico

student•

A mi me genera un index.js pero vacio. ¿Por qué puede ser?

Ema -

student•

Malditos saltos del servidor A .. no puede ser! que bronca!! Pagamos por esto!

Ema -

student•

El servidor B es mucho mas lento.

Fredy Bustos

student•

puede ser problema de tu internet..

Miguel Angel Llacta Flores

student•

me da este error con windows? alguna idea

"NODE_PATH" no se reconoce como un comando interno o externo,  
programa o archivo por lotes ejecutable.

Jaime Diaz

student•

Hola, lamentablemente quienes estamos en win tenemos que adaptarnos a ciertos cambios o maneras de realizar ciertos procedimientos siguiendo el paso a paso de los profesores... para solucionar el problema de "NODE_PATH" hay que tomar el primer atajo como indicó Sacha, de utilizar: "../" para salir del directorio actual un nivel y poder así importar el recurso requerido, como lo muestro en este corto ejemplo de importacion:

import $tvShowsContainer from '../tv-shows-container'

Lo otro que hay que tener en cuenta para que no se desplieguen errores con el comando BUILD, es importar la ruta completa de los index.js que se van desacoplando como módulos aparte, es decir, los imports requeridos del index.js del directorio RENDER, SEARCH-FORM, TV-SHOWS-CONTAINER Y TVMAZE-API-CLIENT, una de las importaciones lo hice por ejemplo asi:

import 'C:/Users/JaimeI/Documents/platzi/cursos/JQuery-JS/project01/src/search-form'

finalmente, me desplegaba un error muy incomodo al tener el index.js principal en la raiz del directorio SRC, ésto porque presentaba problemas el comando:

"build-js": "browserify -t [ babelify --presets [ es2015 ] ] src/index.js > public/app.js"

entonces, decidí dejarlo en la raiz del proyecto junto con los archivos de estilos y el index.html, la razon es porque dentro de la linea del comando : "BUILD-JS" hay que encerrar con comillas dobles tambien la ruta "src/index.html", asi:

copy "src/style.css" public/app.css & copy "src/index.html" public/app.html

la linea anterior me funcionaba perfectamente en la linea de comandos de la terminal de WINDOWS, el problema! es que toda esa linea va dentro de comillas dobles tambien ;( :

"copy-files": "copy style.css public/app.css & copy index.html public/app.html"

fue por ésta razón que decidí dejar los 3 componentes principales (ARCHIVO JAVASCRIPT, HOJA DE ESTILOS Y LA PAGINA) en la raíz del proyecto, de resto he seguido todas las instrucciones del profesor y todo me ha funcionado correctamente con algo de esfuerzo y horas de dedicación.

Marcos

student•

Seria una gran ayuda disponibilizar el codigo funcionando para windows 😃

Alejandro Moreno

student•

Se que no tiene que ver, pero como hizo Sacha para eliminar el caracter comilla de todas las lineas estilo multi edit? Se que con ALT+Arrow puedo editar varias lineas pero no se como hizo el eso... :D

Sergio Blanco Moreno

student•

Tienes que ir a Preferences->Key Bindings - Default, en la nueva ventana que aparecerá incluyes este código:

{ "keys": ["ctrl+/"], "command": "toggle_comment", "args": { "block": false } },  
{ "keys": ["ctrl+shift+/"], "command": "toggle_comment", "args": { "block": true } },  
Luego para comentar miltilínea seleccionas las lineas y apretas ctrl + shift + 7  
Espero te sirva

Raúl Segura Nabarret

student•

Seleccionas el caracter con Cmd + Shift y una vez que lo tienes seleccionado comienzas a presionar Cmd + D, hasta que tengas una selección múltiple

Dani Checa Martínez

student•

El proyecto me andaba perfecto hasta antes de esta clase. Tras modularizar todo, el proyecto se queda trabado intentando cargar los shows (muestra solo el spinner). Ocurre solo en Firefox, mostrando por consola los errores/warnings "SyntaxError: let is a reserved identifier" y "Use of getPreventDefault() is deprecated. Use defaultPrevented instead."

En Chrome, sin embargo, anda perfectamente.

Podría ser algo relacionado con Babelify, ¿no? ¿A alguien más le pasa lo mismo?

Alex de Caso

student•

A mi me pasa lo mismo, despues de modularizar dejó de funcionar en firefox y me salta el SyntaxError del let, aunque no el del getPreventDefault, y en Chrome sigue funcionando. Pienso también que puede ser algo relacionado con babelify, a ver si alguien sabe que es lo que pasa.

Juan Alexander Rodríguez Pérez

student•

Pues seguí todo pero la consola de gtbash en windows no funcionó,hice lo de un compañero abajo pero nada:

"scripts": {  
    "public": "mkdir public",  
    "build-js": "NODE_PATH=. browserify -t [ babelify --presets [ es2015 ] ] src\\index.js > public\\app.js",  
    "copy-files": "copy src\\index.css public\\app.css && copy src\\index.html public\\index.html",  
    "build": "npm run public && npm run build-js && npm run copy-files",  
    "serve": "serve public"  
  }  
}

FABIO ANDRES HERNANDEZ

student•

me sucede lo mismo, se encontro alguna solución?

Jose Garcia

student•

La importación de módulos por lo que veo es ineficaz si utilizas por ejemplo jquery como módulo, y lo estas importando en muchos archivos, lo único que veo es que duplicas el código a diestro y siniestro, no le veo ninguna utilidad en los módulos excepto estés utilizando módulos donde solo lo uses una vez, en este ejemplo ha importado el modulo de jquery 3 veces, ya me dirás si esto es correcto :)

Miguel Exposito Fernandez

student•

No es asi. Tu importas jquery en tantos módulos como necesites, pero cuando haces el build solo tienes 1 archivo con todo el js, y con jquery 1 sola vez dentro de ese archivo, en la carpeta public, la cual vas a colocar en tu servidor. Osea, src es tu ambiente de desarrollo, ahí puedes tener tantos import como necesites, lo importante en este ambiente es tener una metodología de trabajo que sea clara, aquí lo eficiente es tener todo muy organizado y eso no afectara a tu public.

Jose Andres Gonzalez Guevara

student•

No veas el Import como importar todo el modulo, es mas como 'use', estas referenciandolo mas no importando el modulo completo.

Alver Alexander Grisales Ortega

student•

cual es la direfencia de "devDependencies" de "dependencies" del archivo package.json

Carlos Rojas

student•

Las devDependencies, son las que utilizas sólo para el desarrollo del proyecto, ejemplo: Browserify y Babel, en cambio las dependencies, son las que se utilizan para producción, en el archivo final, por ejemplo JQuery.

Manuel Galindez

student•

Una duda que por favor deseo que me aclaren, cuando empezamos a manejar directamente utilizando page() que por lo que veo es algo similar a las rutas en backbonejs, todo eso se puede evitar si usando algun framework mvc?

Manuel Galindez

student•

qs.parse() transforma a un objeto JSON

Luis Melo

student•

Tengo un problema con page o browserify.
para que todo funcione en la función page tengo que poner .ready de jQuery. Si no pongo todo en un ready los selectores de jQuery no traen nada.

page('/',function(ctx,next){

$(function(){
if(!localStorage.shows){
getShows(function(shows){
localStorage.shows = JSON.stringify(shows);
renderShows(shows);
});

}else{
renderShows(JSON.parse(localStorage.shows) );
}
});

sin ready no me funciona nada.

Luis Melo

student•

Solucionado. Esta agregando el app.js en el header.

Arturo Jesus Martínez Sáenz

student•

Para usar las rutas absolutas (como usa en profesor) en Windows es necesario agregar manualmente una variable de entorno llamada NODE_PATH y ponerle de valor la ruta donde esta el proyecto. https://onedrive.live.com/redir?resid=4ACC48CD5F17EC20!12555&authkey=!AKSCAxtVWLTflNM&v=3&ithint=photo%2cpng
Basicamente se da clic derecho en Equipo, se buca configuracion avanzada y se elije variables de entorno. Luego le pones nueva y le pones nombre y valor. Eso es todo. En el package.json ya no se incluye la cadena NODE_PATH=.

Edgar Marcel Turizo Poveda

student•

La metodología para trabajar los proyectos como seria mejor, Desde el principio hacer las modulaciones, O hacer la maqueta y luego modular?????

Àlex Grau Roca

student•

¿Con hacer la maqueta te refieres a construir primero todo el código y luego ir haciéndolo pedazos?

Como siempre, todo depende del proyecto, aunque personalmente siempre recomiendo pensar un poco y estructurar el proyecto antes de empezar a escribir código (por mi propia experiencia).

A partir de aquí, si empiezas con un proyecto pequeño sin perspectivas de crecimiento a corto/medio plazo siempre te resultará más rápido hacerlo todo del tirón. Si en un futuro el proyecto crece, ya se harán las modulaciones correspondientes.

Sin embargo, un proyecto que es grande o tiene clara perspectiva de crecer, es mejor empezar de 0 haciendo las cosas bien hechas, ya que cuando te das cuenta el proyecto ya es enorme y tener que reconstruir el código cuesta MUCHÍSIMO más trabajo que el tiempo ahorrado inicialmente.

Gael Treviño Prieto

student•

Para que se crean archivos .json y se crean carpetas(src, etc!!)en las cuales organiza todo pero si al hacer una paginas se puede subir sin toda esa organizacion no o es caso de buenas practicas??? o se usan carpetas y todo eso cuando vas a ocupar librerias???

Gael Treviño Prieto

student•

No entendi por que crea varios index.js???

Àlex Grau Roca

student•

Cada carpeta tiene su propio index.js para indicar que es el archivo principal. No sé si me he explicado correctamente

Agaric LLC

student•

Fue todo un reto tengo Windows 7, pero lo logre: todo lo realice de acuerdo a lo que el profe dijo lo único diferente que hice fue no utilizar el NODE_PATH=. por que no me funciono, y cambie los " / " por " \ " para que mi sistema operativo lo entendiera.

"scripts": {
	"public": "mkdir public",
	"build-js": "browserify -t [ babelify --presets [ es2015 ] ] src\\index.js > public/app.js",
	"copy-files": "copy src\\index.css public\\app.css & copy src\\index.html public",
	"build": "npm run public & npm run build-js & npm run copy-files",
	"serve": "serve public"
}

y para modular en los import se debe ocupar " …\ " por lo que no se utiliza el NODE_PATH=. y se bede de especificar mejor:

import $ from 'jquery'
import page from 'page'
import { getShows, searchShows } from '..\\tvmaze-api-client\\index.js'
import renderShows from '..\\render\\index.js'
import $tvShowsContainer from '..\\tv-shows-container\\index.js'
import '..\\search-form\\index.js'
import qs from 'qs'

Espero que esto sea de ayuda…

Jose Andres Gonzalez Guevara

student•

Como escribes el comentario automático de module Dependencies?

Àlex Grau Roca

student•

Plugin de sublimetext DocBlockr