[Adonis JS] Usando a função de Laravel Mix

Eu venho de um fundo de Laravel, então, quando comecei a desenvolver um projeto em Adonis JS, estava perdendo a ferramenta de frontend mais útil: Laravel Mix

O que eu perdi foi a função mix, com esta função, você pode usar uma versão hash de seus recursos JS ou CSS, porque, você sabe, se você está sempre servindo recursos do servidor com o mesmo nome de arquivo, o navegador servirá à versão antiga que Ele armazenou, isso pode aumentar a velocidade do seu site, mas você precisará sempre servir a última versão. Para evitar isso, os desenvolvedores podem adicionar um hash ou criar uma função do zero, mas se o Laravel tem a função, por que não usar a mesma lógica em Adonis JS?

O objetivo é criar uma função global para as visualizações. Podemos adicioná-lo em start/hooks.js.

1
const { hooks } = require('@adonisjs/ignitor');
2
const manifest = require('../public/mix-manifest');
3

4
hooks.after.providersBooted(() => {
5
  const View = use('View');
6

7
  // Creating the mix function in edge views
8
  View.global('mix', function (asset) {
9
    if (!manifest[`/${asset}`]) {
10
      return '404-asset-not-found';
11
    }
12

13
    return manifest[`/${asset}`];
14
  });
15
});

Em seguida, reinicie o servidor Adonisjs e você pode usá-lo em suas visualizações de duas maneiras diferentes, usando funções Adonisjs ou HTML.

1
{{ css(mix('css/your-styles.css')) }}
2

3
<!-- ou -->
4
<link href="{{ mix('css/your-styles.css') }}" rel="stylesheet" />

Conserta? Modificações? Clique aqui para editar esta página no Github

Meus posts não são geradas por IA, no estanto, elas poderiam ser corrigidas por ela. O primero rascunho é siempre minha criaçao

Autor

Escrito por Helmer Davila

[Adonis JS] Usando a função de Laravel Mix

Tags

[Adonis JS] Using Laravel Mix function

Autor