Usando un plugging de jQuery desde NPM

Clase 27 de 61 • Curso de JavaScript y jQuery 2015

Guillermo Reyes

student•

Si se trabaja con varias librerías js se generaría un bundle.js bien pesado lo que afectaría al tiempo de carga de página. Cómo se maneja eso?

Y por otro lado, hay alguna forma de trabajar con browserify y Django?

Excelente curso, excelente profesor!

Guillermo Reyes

student•

Le echo un ojo, gracias.

Ivan Cardozo

student•

Esta clase estuvo muy buena , seria perfecta de no ser porque NO ME ANDA EL CODIGO. Este curso se me arruino por en package.json , los comandos de npm no me andan cuando los llamo me tira siempre errores .

Dejo mi codigo por si me pueden ayudar a ver que estoy haciendo mal. tengo windows 10.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Tipso test</title>
    <link rel="stylesheet" href="bundle.css">
  </head>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

{
  "name": "app",
  "dependencies": {
    "jquery": "^3.3.1",
    "tipso": "^1.0.8"
  },
  "devDependencies": {
    "browserify": "^16.1.1",
    "parcelify": "^2.2.0"
  },
  "scripts" :{
    "build":"browserify index.js > bundle.js -p [ parcelify -o bundle.css ] "
  },
  "style": [
    "./node_modules/tipso/src/tipso.css"
  ],
  "browser":{
    "tipso": ".node_modules/tipso/src/tipso.js"
  }
}

// Module dependencies
global.jQuery = require('jquery');
require('tipso');
// Codigo de la aplicacion

jQuery('.title-tipso').tipso();

Diego Forero

Team Platzi•

Puedes compartir el error para ayudarte a solucionarlos, puedes ser un problema de versiones.

Ivan Cardozo

student•

Hola GOLLUM , aca te dejo lo que sale despues de correr el comando build.

C:\Users\Usuario\Desktop\apuntes\Arquitecto Fronted\JavaScript y Jquery>cd "Tipso responsive Jquery"

C:\Users\Usuario\Desktop\apuntes\Arquitecto Fronted\JavaScript y Jquery\Tipso responsive Jquery>npm run build

> app@ build C:\Users\Usuario\Desktop\apuntes\Arquitecto Fronted\JavaScript y Jquery\Tipso responsive Jquery
> browserify index.js > bundle.js -p [ parcelify -o bundle.css ]

Error: Cannot find module 'C:\Users\Usuario\Desktop\apuntes\Arquitecto Fronted\JavaScript y Jquery\Tipso responsive Jquery\.node_modules\tipso\src\tipso.js' from 'C:\Users\Usuario\Desktop\apuntes\Arquitecto Fronted\JavaScript y Jquery\Tipso responsive Jquery'
    at C:\Users\Usuario\Desktop\apuntes\Arquitecto Fronted\JavaScript y Jquery\Tipso responsive Jquery\node_modules\browser-resolve\node_modules\resolve\lib\async.js:55:21
    at load (C:\Users\Usuario\Desktop\apuntes\Arquitecto Fronted\JavaScript y Jquery\Tipso responsive Jquery\node_modules\browser-resolve\node_modules\resolve\lib\async.js:69:43)
    at onex (C:\Users\Usuario\Desktop\apuntes\Arquitecto Fronted\JavaScript y Jquery\Tipso responsive Jquery\node_modules\browser-resolve\node_modules\resolve\lib\async.js:92:31)
    at C:\Users\Usuario\Desktop\apuntes\Arquitecto Fronted\JavaScript y Jquery\Tipso responsive Jquery\node_modules\browser-resolve\node_modules\resolve\lib\async.js:22:47
    at FSReqWrap.oncomplete (fs.js:166:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app@ build: `browserify index.js > bundle.js -p [ parcelify -o bundle.css ] `
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the app@ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Usuario\AppData\Roaming\npm-cache\_logs\2018-04-06T21_23_52_904Z-debug.log```

Gael Treviño Prieto

student•

Perfecta clase!!

Carlos Andrés Millan Satizabal

student•

Buena la clae pero les recomiendo no usar música de fondo, distrae mucho.

Usando un plugging de jQuery desde NPM

Bienvenidos

¿Dónde aprender JavaScript actualizado?

Introducción a JQuery

Preguntas antes de la clase

El desarrollo web moderno

Configurando y agregando jQuery

Uso de selectores en jQuery

Teoria de Objetos en jQuery

Objetos de jQuery

Preguntas y respuestas en clase

Eventos, callbacks y AJAX

Preguntas antes de la clase

Teoria sobre eventos y callbacks

Uso de eventos onClick y AJAX

Callbacks y efecto spinner

Promises en jQuery

Persistencia de datos con Local Storage

Preguntas y respuestas en clase

Optimización en JQuery

Preguntas antes de la clase

Efectos y transiciones con jQuery

Herramientas adicionales: ¿Qué es NPM?

Integración y configuración de NPM

Optimización para producción

Modulando el proyecto usando Browserify

Preguntas y respuestas en clase

Complementos del curso

Guia completa sobre ECMAScript 6

VanillaJS vs jQuery

Mejorar el performance de jQuery

Selectores con jQuery

Usando un plugging de jQuery desde NPM

Introducción a Component CSS, front-end del futuro

Introducción a pseudo-elementos en CSS3

Unidades de medida en CSS, la guía definitiva

Visualiza imágenes en pantalla completa con IntenseJS

Proyecto: Marvel Card Game

Introducción al Front-end: Componentes, Stylus y Jade

ECMAScript 6, AJAX y Promises

¿Qué es un API? (Usando el API de Marvel)

Creación de un entorno de desarrollo local

AJAX con jQuery

Promises

ECMAScript6

Request de una imagen y modificación con JQuery

Modificar Elementos Con API Data

Arrow Functions

Ellipsis CSS

Preguntas y Respuestas

Clases de Ecmascript 6

LocalStorage, Latencia y Plantillas con ECMAScript6

Latencia y Local Storage

Templates en ECMAScript 6

Uso de Clases en Javascript

Operadores y Funciones Matemáticas en Javascript

Funciones orientadas a eventos

Datos en la plantilla usando Promises

Preguntas y Respuestas

Introducción a Single Page Apps

Single Page App

Page.js y Middlewares

Preguntas y Respuestas

Optimiza tu Single Page App con Browserify Y Gulp

The road to a single page app

Browserify y Component Oriented Development

Gulp

Preguntas y Respuestas

Livereload, Express y Node.js

Configuración de Livereload

Node.JS: Javascript del lado del servidor

Express: Web Framework para Node.JS

Realtime en Node.JS usando Socket.io

Preguntas y Respuestas