Refactorizando

13/27

Lectura

Nuestro proyecto va creciendo, poco a poco, con librerías, configuraciones y demás contenido.
El fichero de arranque main.js está haciéndose un poco difícil de manejar debido a todo el contenido que le estamos metiendo.

Una buena idea puede ser llevarse todo el código de librerías de terceros a una carpeta externa. Esta carpeta ya la tenemos creada y se llama /plugins. Vamos a meter ahí el código de Bootstrap-Vue y de FontAwesome. Luego lo importaremos en el main.js y así quedará mas limpio y legible nuestro código.

Empezamos creando el fichero BootstrapVue.js dentro de /plugins, y le damos el siguiente contenido:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

Tal y como dice la documentación, importamos BootstrapVue, nos traemos el CSS y después hacemos ‘uso’ de BootstrapVue desde Vue.

Hacemos lo mismo con FontAwesome, creamos el fichero fontAwesome.js dentro de /plugins y movemos todo el contenido que había en main.js a este fichero:

import Vue from 'vue'

import { library } from '@fortawesome/fontawesome-svg-core'
import { faSkull, faCrown, faDungeon, faHatWizard, faHammer, faGem } from '@fortawesome/free-solid-svg-icons'
import { faVuejs, faBootstrap, faFontAwesome, faGithub, faBattleNet } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(
 faSkull,
 faCrown,
 faDungeon,
 faHatWizard,
 faHammer,
 faGem,
 faVuejs,
 faBootstrap,
 faFontAwesome,
 faGithub,
 faBattleNet
)

// Esta es la forma de registrar un componente global con Vue
// El primer parámetro es cómo queremos que se use/llame nuestro componente desde el HTML
// El segundo parámetro es la referencia al componente (que acabamos de importar)
Vue.component('font-awesome-icon', FontAwesomeIcon)

Tu carpeta de /plugins se vería así:

📂 /plugins
   ├── bootstrapVue.js
   └── fontAwesome.js

Lo que hemos hecho es mover el todo el contenido de dichas librerías fuera del main.js y ponerlo en archivos independientes.
Ahora queda hacer referencia a estos archivos desde el main.js para que todo siga funcionando tal y como estaba antes. Lo puedes hacer de la siguiente forma:

// BootstrapVue
import './plugins/bootstrapVue'

// Vue Font-Awesome
import './plugins/fontAwesome'

Ya que estamos en el apartado de refactorizar y estamos tocando el main.js, podemos quitar el console.log('Hola 🌝') que pusimos al principio, que ya no nos sirve para nada.
Tu fichero main.js completo se vería así:

import Vue from 'vue'
// BootstrapVue
import './plugins/bootstrapVue'

// Vue Font-Awesome
import './plugins/fontAwesome'

import App from './App.vue'
import router from './router'
import store from './store'

// CSS global
import './assets/css/main.styl'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  methods: {
    // Nuestra función
    init () {
      store.dispatch('oauth/getToken')
    }
  },
  // Hook created
  created () {
    this.init()
  },
  render: h => h(App)
}).$mount('#app')

Te habrás dado cuenta de que hemos importado Vue 2 veces, una para el fichero de BootstrapVue.js y otra vez para el de fontAwesome.js.
No te preocupes, no vamos a tener código duplicado y nuestra aplicación no va a ser el doble de grande. De esto se encarga Webpack, solo lo incluirá una vez en el bundle final.

¡Fíjate!, ahora nuestro archivo queda más limpio y legible 👏. Hemos agrupado contenido por funcionalidad. A partir de ahora, todas las librerías que vayamos metiendo las podemos dejar dentro de la carpeta /plugins para tener nuestro código más ordenado.

Aportes 7

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Debido a que pueden haber varios plugins a implementarse en la App, lo que se puede optar la mantener la app más limpia aún seria crear un archivo index.js dentro de la carpeta plugins, en donde vayan todos los imports.

plugins/index.js

// Bootstrap Vue
import './bootstrapVue'

// FontAwesome
import './fontAwesome'

main.js

import Vue from 'vue'

import App from './App.vue'
import router from './router'
import store from './store'

import './plugins'
import './assets/css/app.styl'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  created() {
    this.init()
  },
  methods: {
    init() {
      store.dispatch('oauth/getToken', null, { root: true })
    }
  },
  render: h => h(App)
}).$mount('#app')

Genial, yo lo que haría para ordenar todo aún más es crear un archivo index.js en plugins y ahí hacer el import de todos los plugins y en main simplemente importar el index

También me pregunto cómo se haría la misma refactorización en Vue 3, porque ahí ya no podemos hacer Vue.use sino ahora es createApp().use(), lo mas probable es que para fontAwesome hagamos un export del fontawesome, y para boostrap igual hagamos el export de Bootstrap, de todas maneras a la fecha que escribo esto todavía no existe Boostrap Vue para Vue 3, y ya que hablo de esto, ¿Cómo se haría toda esta lógica y métodos y hooks que tenemos en el main en Vue 3? xD Porque en Vue 3 ya pasas directamente el componente, no se si dentro de createApp se puedan poner todas esas cosas jaja

Que pasada!, Vuetify hace este paso por nosotros!

Ups, creo que me adelanté una clase 😅

Vengo laburando mucho en el refact de mis aplicaciones y partir los archivos me parece fundamental… esta clase lo deja muy claro

Yeah man!

Me fascina el orden y la manera que refactorizó, nah de auténticos magos 10/10