Fix para agregar JavaScript en el cliente

Clase 13 de 46 • Curso Definitivo de JavaScript 2016

Antes de continuar con el siguiente material es muy importante que prestes atención a este fix.

Por una actualización en la librería de Babelify, debemos hacer unos ajustes para que lo que hagamos en el siguiente video funcione correctamente.

Cuando estemos instalando babelify, debemos instalar también una librería que define qué cosas Babel debe transformar. Para eso corremos el comando:

babel-preset-es2015

Y cuando estemos escribiendo en el archivo Gulpfile.js la función:

gulp.task('scripts', function () {
...
});

Debemos colocar:

gulp.task('scripts', function () {
  browserify('./src/index.js')
    .transform(babel, {presets: ["es2015"]})
    .bundle()
    .pipe(souce('index.js'))
});

La línea más importante es la de

.transform(babel, {presets: ["es2015"]})

Ante cualquier duda o problema, no dejen de comentar en este material o en el siguiente!

Isabel Muñoz

student•

Entiendo que para instalar la librería el comando exacto es:

npm install --save-dev babel-preset-es2015

Y la línea del gulpfile.js que antes teníamos como:

.transform(babel)

es necesario cambiarla por

.transform(babel, {presets: ["es2015"]})

Por otra parte en la documentación de babelify especifica que las opciones (en este caso el preset es2015) se pueden pasar de cualquiera de las formas estándar que admite browserify. Es decir que se puede usar tanto la opción anterior como la opción que comentan @juansebastianreyes y @AngelP11 especificando:

var preset =  require(‘babel-preset-es2015’);

y posteriormente la línea del transform quedaría como:

.transform(babel, preset)

Edgar Francisco San Juan Herrera

student•

Al día de hoy, al instalar la librería babel-preset-es2015, la Terminal te manda un mensaje que esa librería es absoleta. Entonces babel te recomienda instalar la librería babel-preset-env. La instalamos.

Leyendo la documentación de esa librería, nos dice que funciona igual que babel-preset-es2015. Y que remplaza varios presets como babel-preset-es2015, babel-preset-es2016, babel-preset-es2017.

Entonces al momento de utilizarla en nuestro archivo Gulp sólo cambiamos:

.transform(babel, {presets: ["es2015"]})

Por:

.transform(babel, {presets: ["env"]})

Y listo. 😃

Victor Hugo Cortés Posada

student•

es2015 ya es obsoleto, utilice el siguiente código para instalar:

npm install --save-dev browserify babelify babel-preset-env babel-core

En el archivo Gulpfile.js cambiar

.transform(babel)

por

.transform(babel, { presets: ['env'] })

Victor Flores

student•

Gracias Totales

Daniel Morales

student•

No me funciona de ninguna manera. Ya vi el video que sigue, lo fui realizando paso a paso en dos ocasiones, pero el tema es que no me carga el app.js cuando prendo el servidor, por tanto no me sale el alert(). Lo peor del caso es que no me aparece ningun error, simplemente cuando voy a las herramientas del desarrollador de chrome, no me carga el archivo app.js (esta bien escrito)

Gulpfile.js

gulp.task('scripts', function(){
  browserify('./src/index.js')
    .transform(babel, {presets: ["es2015"]})
    .bundle()
    .pipe(source('index.js'))
    .pipe(rename('app.js'))
    .pipe(gulp.dest('public'));
});

gulp.task('default', ['styles', 'assets', 'scripts']);

views/index.pug

script(type='text/javascript', src='https://code.jquery.com/jquery-3.2.1.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js')
    script(type='application/javascript', src='app.js')

El comando gulp corre bien y genera el archivo en public (en el proyecto), pero no carga en el navegador

package.json

},
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^7.3.0",
    "browserify": "^14.4.0",
    "gulp": "^3.9.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

Daniel Morales

student•

Gracias @GOLLUM23 en parte si era el error, pero tuve que eliminar el archivo index.html, y en el archivo index.pug ponerle public/ al enlace… y me funciono. Gracias!

Ignacio Esteban Aredez Diaz

student•

No logro hacer que funcione ya instale babel core y npm install babel-preset-env --save-dev y sigue sin funcionar me doy cuenta que al llamar a gulp desde la terminar el no corre la parte de scripts solo “styles” Assets " y default

var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);
var rename = require(‘gulp-rename’);
var babel =require(‘babelify’);
var browserify = require(‘browserify’);
var source =require(‘vinyl-source-stream’);

gulp.task(‘styles’, function () {
gulp
.src(‘index.scss’)
.pipe(sass())
.pipe(rename(‘app.css’))
.pipe(gulp.dest(‘public’));
})

gulp.task(‘scripts’, function(){
browserify(’./src/index.js’)
.transform(babel, {presets: [“env”]})
.bundle()
.pipe(source(‘index.js’))
.pipe(rename(‘app.js’))
.pipe(gulp.dest(‘public’));
});

gulp.task(‘default’, [‘styles’, ‘assets’, ‘scripts’]);

Diego Forero

Team Platzi•

No feo una tarea llamada assets, creo que el problema es que no la encuentra y rompe la ejecución y por eso no llega a ejecutar scripts, prueba a quitar assets. de la tarea default.

Ignacio Esteban Aredez Diaz

student•

Gracias Gollum !! Funciono (el problema tambien era qeu tenia otro archivo y vamos que lo hestaba haciendo mal)

Juan Sebastian Reyes Acosta

student•

Hay que hacer el var preset = require(‘babel-preset-es2015’);, para poderlo utilizar dentro de la tarea de los scripts?

Angel Ponce

student•

si bro es necesario, saludos!!

Daniel Hidalgo

student•

no tendría que ser entonces?: var preset = require(‘env’);

Juan Sebastian Reyes Acosta

student•

Hay que hacer el var preset = require(‘babel-preset-es2015’);, para poderlo utilizar dentro de la tarea de los scripts?

Ramon Molina

student•

holaa que tal tengo problemas con el gulp antes de poner el scripts andaba todo bien asi que quizas es solo en esta ultima parte este seria mi codigo

var gulp=require('gulp');
var sass=require('gulp-sass');
var rename=require('gulp-rename');
var babel =require('babel-core');
var browserify =require('browserify');
var source= require('vinyl-source-stream');

gulp.task('styles',function(){
  gulp
     .src('index.scss')
     .pipe(sass())
     .pipe(rename('app.css'))
     .pipe(gulp.dest('public'));
})
gulp.task('assets',function(){
  gulp
    .src('assets/*')
    .pipe(gulp.dest('public'));
})
gulp.task('scripts',function(){
  browserify('./src/index.js')
    .transform(babel,{presets: ['env']})
    .bundle()
    .pipe(source('index.js'))
    .pipe(rename('app.js'))
    .pipe(gulp.dest('public'));
})

gulp.task('default',['styles','assets','scripts'])

y el packge.json

"author": "platzi",
  "license": "MIT",
  "dependencies": {
    "express": "^4.16.2",
    "materialize-css": "^0.100.2",
    "pug": "^2.0.0-rc.4",
    "save": "^2.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babelify": "^8.0.0",
    "browserify": "^14.5.0",
    "gulp": "^3.9.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

desde ya muchas gracias hasta el momento me parece super interesante todo 😄

Ramon Molina

student•

cambie

var babel = require('babel-core');

por

var babel = require('babelify');

😄 por si le sirva a alguien

Gabriel Novoa

student•

Gracias me funciono!!! 😃