Introducción a vue-cli y webpack

En esta quinta parte del Curso de Vue.js 2, vamos aprender cómo es el flujo de desarrollo profesional con Vue. Para ello vamos a instalar y usar, npm (manejador de paquetes para Node), vue-cli (el cliente de Vue para crear proyectos), webpack, vue-loader, Babel y más. Si suena complicado, no te preocupes, puesto que Vue.js con la ayuda de su cliente vue-cli lo hace muy sencillo. Además a partir de la siguiente lección, vamos a explicar todo el proceso paso por paso:

Notas

La interfaz de línea de comandos de Vue.js la instalamos a través de npm. npm es un manejador de paquetes para Node.js. La instalación de Node.js es muy sencilla y la puedes realizar desde la página de Node.js.

Una vez que completes la instalación puedes comprobar que ya tienes Node.js instalado con el comando node -v desde la terminal. Si la instalación se ha hecho de forma correcta el comando te devolverá la versión de Node.js instalada (en el video trabajamos con Node.js v7.4.0).

Puedes aprender más sobre la línea de comandos en el Curso básico de Terminal.

Una vez instalado Node.js podemos hacer uso de npm. Con el siguiente comando, que ejecutamos desde la terminal, instalamos la Interfaz de línea de comandos de Vue.js:

~$ npm install vue-cli -g

La opción -g sirve para indicarle a npm que queremos que el paquete sea instalado de forma global.

Una vez finalizada la instalación tendremos disponible el comando vue init. Con este comando vamos a poder crear nuevos proyectos de Vue.js.

Si ya has utilizado Laravel este proceso te resultará similar a la forma en la generamos un nuevo proyecto con laravel new.

Con Vue.js podemos crear proyectos de diferentes tipos. Hasta el momento hemos venido trabajando de forma similar a lo que trae la plantilla simple por lo que primero revisaremos esta plantilla ejecutando:

~$ vue init simple nombre-del-proyecto

Puedes observar que primero indicamos el comando que queremos ejecutar (init) luego el tipo de plantilla (simple) y después el nombre del proyecto. Una vez ejecutado este comando Vue.js nos va a hacer algunas preguntas, como por ejemplo el nombre del proyecto, que podemos dejar por defecto (como lesson22) o podemos ingresar cualquier otro. Vue también nos preguntará por el autor del proyecto.

En la carpeta de nuestro proyecto generado por vue init tenemos un solo archivo llamado index.html. Este archivo es una plantilla que contiene un enlace al CDN de Vue.js dentro de una etiqueta script (de forma similar a lo que hemos hecho hasta el momento). Además de esto la plantilla tiene un ejemplo sencillo de Vue.js y una instancia de Vue al final del archivo dentro de otra etiqueta script.

Luego de esto creamos otro proyecto con vue init, esta vez usando la plantilla webpack-simple. Esta plantilla utilizará webpack y una serie de modulos de webpack como vue-loader, el cuál nos va a permitir utilizar componentes de Vue en un solo archivo (Single File Components):

~$ vue init webpack-simple lesson22

Al ejecutar este comando nuevamente Vue.js nos realizará una serie de preguntas, el nombre del proyecto, la descripción del proyecto, el autor y si queremos utilizar Sass. Una vez hecho esto se generá la carpeta de nuestro proyecto que esta vez contendrá diferentes archivos:

La carpeta src es donde pasaremos la mayor parte del tiempo desarrollando nuestra aplicación.
El archivo de Babel .babelrc. Babel nos permite utilizar las nuevas herramientas de JavaScript y ES6 sin incovenientes ya que transpilará nuestro código a una versión de JavaScript que puede ser leida por cualquier navegador.
El archivo .gitignore nos permite indicarle a git qué archivos queremos ignorar.

Si quieres aprender más sobre .gitignore y git puedes hacerlo con nuestro Curso de Git y GitHub.

También tenemos el archivo index.html, pero nota que está vez el div con el id app se encuentra vacío. Este div contendrá nuestra aplicación. También incluimos un archivo de JavaScript llamado build.js que va a contener todo el código de nuestra aplicación y las dependencias ya optimizados para producción. El archivo package.json contiene la información sobre el proyecto, algunos scripts que podemos ejecutar en la terminal, las dependencias del proyecto y las dependencias de desarrollo. Las dependencias de desarrollo se van a utilizar únicamente durante el desarrollo y no se van a exportar al archivo final.

Todas estas dependencias podemos instalarlas desde la terminal ejecutando el comando npm install. Debemos asegurarnos de estar dentro del directorio del proyecto al ejecutar este comando:

~$ cd directorio-del-proyecto/
~$ npm install

Dependiendo de tu velocidad de conexión este proceso puede durar unos segundos o unos minutos. Una vez hecho esto ya tendremos todas las dependencias instaladas, tanto las de desarrollo como las del proyecto.

Las dependencias se encuentran instaladas en la carpeta node_modules. Aunque son muchos directorios no debemos preocuparnos por esto ya que en su mayoria van a ser utilizados únicamente durante el desarrollo y no se van a exportar al archivo final de producción.

Finalmente dentro de la carpeta de nuestro proyecto tenemos un archivo README donde podemos colocar información sobre el proyecto y un archivo llamado webpack.config.js. Este último puede resultar muy «intimidante», sin embargo el archivo generado por Vue ya trae todo lo necesario para compilar nuestro proyecto.

Si no comprendes el contenido de webpack.config.js no te preocupes, aún no es necesario que aprendamos webpack ni que entendamos todo lo que sucede dentro del archivo.

Sin embargo, dicho esto, podemos dar un vistazo al contenido de webpack.config.js:

El archivo de entrada de nuestra aplicación es main.js y se encuentra dentro de la carpeta src. A este archivo le hacemos referencia desde entry en webpack.config.js y se va a compilar dentro del directorio dist con el nombre build.js:

entry: './src/main.js',
output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'build.js'
},

Si en la terminal ejecutamos el comando npm run build, webpack compilará todas las dependencias y luego va a generar un directorio llamado dist. Este directorio contendrá los archivos compilados.

Nuevamente en webpack.config.js podemos ver que webpack utiliza una serie de módulos:

module: { 
  rules: [
   {
     test: /\.vue$/,
     loader: 'vue-loader',
     options: {
       /**/
     }
   },
   {
     test: /\.js$/,
     loader: 'babel-loader',
     options: {
       /**/
     }
   },
   {
     test: /\.(png|jpg|gif|svg)$/,
     loader: 'file-loader',
     options: {
       /**/
     }
   }
  ]
}

El modulo vue-loader va a interpretar los archivos .vue. Estos archivos los usaremos para crear nuestros componentes de ahora en adelante. babel-loader nos va a permitir transpilar la sintaxis de ES6 a una versión de JavaScript que puede ser leido por todos los navegadores modernos. Por ultimo tenemos file-loader que nos va a permitir copiar los archivos al directorio público.

Si la variable NODE_ENV dentro de webpack.config.js contiene el valor production, webpack procesará el JavaScript de forma diferente de manera que esté comprimido, se eliminen los mensajes de advertencias, se generen los archivos de sourcemaps, etc. La forma de indicarle a Webpack si queremos ejecutar el proceso en modo de producción o desarollo es mediante el archivo package.json donde especificamos los scripts que se pueden ejecutar en la consola. Los scripts no son más que «accesos directos» para ejecutar comandos que de otra forma resultarían muy largos:

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}

Anteriormente ejecutamos el comando build y como puedes ver arriba al ejecutar este comando asignamos el entorno (NODE_ENV) a producción. Por otra parte el comando dev no solo coloca el entorno como desarrollo (NODE_ENV=development) si no que además también inicia el servidor de desarrollo de webpack (webpack-dev-server) y algo llamado Hot Module Replacement (--hot) que veremos más adelante.

Al ejecutar el comando npm run dev se abrirá una nueva pestaña en el navegador por defecto donde podremos ver la plantilla que incluye Vue.js. Todo lo que vemos en el navegador se encuentra dentro de la carpeta src, en main.js definimos nuestro objeto VM principal y el resto del código se encuentra dentro de un componente llamado App que importamos en la parte superior del archivo:

// src/main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

Dentro de App.vue tenemos toda la definición de la plantilla, el código de JavaScript y CSS. Dentro de este archivo podemos hacer los cambios que queramos y apenas los guardemos estos cambios se verán reflejados en el navegador de forma automática sin necesidad de recargar la página, esto se logra mediante Hot Module Replacement como veremos en la lección siguiente donde vamos a «importar» todo el módulo de notas a este nuevo proyecto.

Únete a nuestra comunidad en Discord y comparte con los usuarios y autores de Styde, 100% gratis.

Únete hoy

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.