diff --git a/tutorial/3-es6-babel-gulp/README.md b/tutorial/3-es6-babel-gulp/README.md index d1e062b2..3ca7a2c1 100644 --- a/tutorial/3-es6-babel-gulp/README.md +++ b/tutorial/3-es6-babel-gulp/README.md @@ -1,93 +1,92 @@ -# 3 - Setting up ES6 with Babel and Gulp +# 3 - Configuración de ES6 con Babel y Gulp -We're now going to use ES6 syntax, which is a great improvement over the "old" ES5 syntax. All browsers and JS environments understand ES5 well, but not ES6. So we're going to use a tool called Babel to transform ES6 files into ES5 files. To run Babel, we are going to use Gulp, a task runner. It is similar to the tasks located under `scripts` in `package.json`, but writing your task in a JS file is simpler and clearer than a JSON file, so we'll install Gulp, and the Babel plugin for Gulp too: +Ahora vamos a utilizar la sintaxis de ES6, que es una gran mejora sobre la "antigua" sintaxis ES5. Todos los navegadores y entornos JS comprenden bien el ES5, pero no ES6. Así que vamos a utilizar una herramienta llamada Babel para transformar archivos ES6 en archivos ES5. Para ejecutar Babel, vamos a utilizar Gulp, un corredor de tarea. Es similar a las tareas que se encuentran bajo `scripts` en` package.json`, pero escribir tu tarea en un archivo JS es más sencillo y claro que un archivo JSON, así que instalaremos Gulp y el plugin de Babel para Gulp: -- Run `yarn add --dev gulp` -- Run `yarn add --dev gulp-babel` -- Run `yarn add --dev babel-preset-latest` -- In `package.json`, add a `babel` field for the babel configuration. Make it use the latest Babel preset like this: +- Ejecuta `hilados agregar --dev gulp` +- Ejecuta `hilados agregar --dev gulp-babel` +- Ejecuta `yarn add --dev babel-preset-latest` +- En `package.json`, agrega un campo` babel` para la configuración babel. Haz que use el último preset de Babel sea como este: ```json "babel": { - "presets": [ - "latest" - ] +  "presets": [ +    "latest" +  ] }, ``` -**Note**: A `.babelrc` file at the root of your project could also be used instead of the `babel` field of `package.json`. Your root folder will get more and more bloated over time, so keep the Babel config in `package.json` until it grows too large. +**Nota**: También se podría usar un archivo `.babelrc` en la raíz de su proyecto en lugar del campo` babel` de `package.json`. Su carpeta raíz se hará cada vez más hinchada con el tiempo, así que mantenga la configuración de Babel en `package.json` hasta que crezca demasiado. -- Move your `index.js` into a new `src` folder. This is where you will write your ES6 code. A `lib` folder is where the compiled ES5 code will go. Gulp and Babel will take care of creating it. Remove the previous `color`-related code in `index.js`, and replace it with a simple: +- Mueve tu `index.js` a una nueva carpeta` src`. Aquí es donde escribirá su código ES6. Una carpeta `lib` es donde el código ES5 compilado irá. Gulp y Babel se encargarán de crearlo. Elimine el código anterior `color`-related en` index.js` y reemplácelo por un simple: ```javascript const str = 'ES6'; -console.log(`Hello ${str}`); +console.log (`Hello ${str}`); ``` -We're using a *template string* here, which is an ES6 feature that lets us inject variables directly inside the string without concatenation using `${}`. Note that template strings are created using **backquotes**. +Estamos usando una *una modelo de string* aquí, que es una característica ES6 que nos permite inyectar variables directamente dentro de la cadena sin concatenación usando `$ {}`. Tenga en cuenta que las cadenas de plantilla se crean utilizando **acentos graves**. -- Create a `gulpfile.js` containing: +- Crea una `gulpfile.js` que contenga: ```javascript -const gulp = require('gulp'); -const babel = require('gulp-babel'); -const del = require('del'); -const exec = require('child_process').exec; +const gulp = require ('gulp'); +const babel = require ('gulp-babel'); +const del = require ('del'); +const exec = require ('child_process'). const paths = { - allSrcJs: 'src/**/*.js', - libDir: 'lib', +  allSrcJs: 'src / ** / *. Js', +  libDir: 'lib', }; -gulp.task('clean', () => { - return del(paths.libDir); +gulp.task ('clean', () => { +  Return del (paths.libDir); }); -gulp.task('build', ['clean'], () => { - return gulp.src(paths.allSrcJs) - .pipe(babel()) - .pipe(gulp.dest(paths.libDir)); +gulp.task ('build', ['clean'], () => { +  Return gulp.src (paths.allSrcJs) +    .pipe (babel ()) +    .pipe (gulp.dest (paths.libDir)); }); -gulp.task('main', ['build'], (callback) => { - exec(`node ${paths.libDir}`, (error, stdout) => { - console.log(stdout); - return callback(error); - }); +gulp.task ('main', ['build'], (devolución de llamada) => { +  Exec (`node $ {paths.libDir}`, (error, stdout) => { +    Console.log (stdout); +    Devolver devolución de llamada (error); +  }); }); -gulp.task('watch', () => { - gulp.watch(paths.allSrcJs, ['main']); +gulp.task ('watch', () => { +  gulp.watch (paths.allSrcJs, ['main']); }); -gulp.task('default', ['watch', 'main']); +gulp.task ('default', ['watch', 'main']); ``` -Let's take a moment to understand all this. +Tomemos un momento para entender todo esto. -The API of Gulp itself is pretty straightforward. It defines `gulp.task`s, that can reference `gulp.src` files, applies a chain of treatments to them with `.pipe()` (like `babel()` in our case) and outputs the new files to `gulp.dest`. It can also `gulp.watch` for changes on your filesystem. Gulp tasks can run prerequisite tasks before them, by passing an array (like `['build']`) as a second parameter to `gulp.task`. Refer to the [documentation](https://github.com/gulpjs/gulp) for a more thorough presentation. +El API de Gulp en sí es bastante sencillo. Define `gulp.task`s, que puede hacer referencia a los archivos` gulp.src`, aplica una cadena de tratamientos con `.pipe ()` (como `babel ()` en nuestro caso) y envía los nuevos archivos a `Gulp.dest`. También puede `gulp.watch` para los cambios en su sistema de archivos. Las tareas Gulp pueden ejecutar tareas previas, pasando una matriz (como `['build']`) como segundo parámetro de `gulp.task`. Consulte la [documentación] (https://github.com/gulpjs/gulp) para obtener una presentación más completa. -First we define a `paths` object to store all our different file paths and keep things DRY. +Primero definimos un objeto `paths` para almacenar todas nuestras diferentes rutas de archivos y mantener las cosas DRY. -Then we define 5 tasks: `build`, `clean`, `main`, `watch`, and `default`. +Luego definimos 5 tareas: `build`,` clean`, `main`,` watch` y `default`. -- `build` is where Babel is called to transform all of our source files located under `src` and write the transformed ones to `lib`. -- `clean` is a task that simply deletes our entire auto-generated `lib` folder before every `build`. This is typically useful to get rid of old compiled files after renaming or deleting some in `src`, or to make sure the `lib` folder is in sync with the `src` folder if your build fails and you don't notice. We use the `del` package to delete files in a way that integrates well with Gulp's stream (this is the [recommended](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) way to delete files with Gulp). Run `yarn add --dev del` to install that package. -- `main` is the equivalent of running `node .` in the previous chapter, except this time, we want to run it on `lib/index.js`. Since `index.js` is the default file Node looks for, we can simply write `node lib` (we use the `libDir` variable to keep things DRY). The `require('child_process').exec` and `exec` part in the task is a native Node function that executes a shell command. We forward `stdout` to `console.log()` and return a potential error using `gulp.task`'s callback function. Don't worry if this part is not super clear to you, remember that this task is basically just running `node lib`. -- `watch` runs the `main` task when filesystem changes happen in the specified files. -- `default` is a special task that will be run if you simply call `gulp` from the CLI. In our case we want it to run both `watch` and `main` (for the first execution). +- `build` es donde Babel está llamado a transformar todos nuestros archivos fuente ubicados bajo` src` y escribir los transformados a `lib`. +- `clean` es una tarea que simplemente elimina toda nuestra carpeta` lib` generada automáticamente antes de cada `build`. Esto suele ser útil para deshacerse de los antiguos archivos compilados después de cambiar el nombre o eliminar algunos en `src`, o para asegurarse de que la carpeta` lib` está sincronizada con la carpeta `src` si su compilación falla y no se da cuenta. Utilizamos el paquete `del` para eliminar archivos de una manera que se integra bien con el flujo de Gulp (este es el [recomendado] (https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files -folder.md) para eliminar archivos con Gulp). Ejecutar `yarn add --dev del` para instalar ese paquete. +- `main` es el equivalente a ejecutar` node .` en el capítulo anterior, excepto que esta vez, queremos ejecutarlo en `lib / index.js`. Dado que `index.js` es el archivo predeterminado que Node busca, podemos simplemente escribir` node lib` (usamos la variable `libDir` para mantener las cosas secas). La parte `require ('child_process'). Exec` y` exec` en la tarea es una función Node nativa que ejecuta un comando shell. Enviaremos `stdout` a` console.log () `y devolveremos un error potencial usando la función de devolución de llamada` gulp.task`. No se preocupe si esta parte no es muy clara para usted, recuerde que esta tarea es, básicamente, sólo ejecuta `nodo lib`. +- `watch` ejecuta la tarea` main` cuando ocurren cambios en el sistema de archivos en los archivos especificados. +- `default` es una tarea especial que se ejecutará si simplemente llama` gulp` desde la CLI. En nuestro caso queremos que ejecute tanto `watch` como` main` (para la primera ejecución). -**Note**: You might be wondering how come we're using some ES6 code in this Gulp file, since it doesn't get transpiled into ES5 by Babel. This is because we're using a version of Node that supports ES6 features out of the box (make sure you are running Node > 6.5.0 by running `node -v`). +**Nota**: Quizás se pregunte por qué estamos utilizando algún código ES6 en este archivo Gulp, ya que no se transporta a ES5 por Babel. Esto se debe a que estamos utilizando una versión de Node que soporta las características de ES6 fuera de la caja (asegúrese de que está ejecutando Nodr> 6.5.0 ejecutando `node -v`). -Alright! Let's see if this works. +¡Bien! Veamos si esto funciona. -- In `package.json`, change your `start` script to: `"start": "gulp"`. -- Run `yarn start`. It should print "Hello ES6" and start watching for changes. Try writing bad code in `src/index.js` to see Gulp automatically showing you the error when you save. +- En `package.json`, cambia tu ` start` a: `"start": "gulp"`. +- Ejecutw `yarn start`. Debe imprimir "Hello ES6" y empezar a ver los cambios. Trate de escribir un código malo en `src / index.js` para ver a Gulp mostrar el error automáticamente al guardar. -- Add `/lib/` to your `.gitignore` +- Agregue `/ lib /` a su `.gitignore` +Siguiente sección: [4 - Uso de la sintaxis ES6 con una clase] (/tutorial/4-es6-syntax-class) -Next section: [4 - Using the ES6 syntax with a class](/tutorial/4-es6-syntax-class) - -Back to the [previous section](/tutorial/2-packages) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Volver a la [sección anterior] (/tutorial/2-packages) o la [tabla de contenido] (https://github.com/verekia/js-stack-from-scratch#table-of-contents).