mojolicious plugin webpack

NOMBRE

Mojolicious::Plugin::Webpack - Mojolicious ♥ Webpack

SINOPSIS

Definir punto de entrada

Cree un archivo "./assets/index.js" relativo al directorio de su aplicación con el siguiente contenido:

console.log('Cool beans!');

Solicitud

Su aplicación Mojolicious necesita cargar el complemento Mojolicious::Plugin::Webpack y decirle qué tipo de activos debería poder procesar:

$app->plugin(Webpack => {process => [qw(js css)]});

Consulte "registro" para obtener más opciones de configuración.

Plantilla

Para incluir los activos generados en su plantilla, puede utilizar el asistente "activo":

%= asset "cool_beans.css"
%= asset "cool_beans.js"

Ejecute la aplicación

Puedes iniciar la aplicación usando daemon , hypnotoad o cualquier servidor Mojolicious que desees, pero si quieres un desarrollo rápido debes usar mojo webpack , que es una alternativa a morbo :

$ mojo webpack -h
$ mojo webpack ./script/myapp.pl

Sin embargo, si desea utilizar otro demonio y forzar la ejecución webpack , debe configurar la variable de entorno MOJO_WEBPACK_BUILD en "1". Ejemplo:

MOJO_WEBPACK_BUILD=1 ./script/myapp.pl daemon

Pruebas

Si desea asegurarse de haber creado todos los recursos, puede crear un archivo de prueba como "build-assets.t":

use Test::More;
use Test::Mojo;

# Run with TEST_BUILD_ASSETS=1 prove -vl t/build-assets.t
plan skip_all => "TEST_BUILD_ASSETS=1" unless $ENV{TEST_BUILD_ASSETS};

# Load the app and make a test object
$ENV{MOJO_MODE}          = 'production';
$ENV{MOJO_WEBPACK_BUILD} = 1;
use FindBin;
require "$FindBin::Bin/../script/myapp.pl";
my $t = Test::Mojo->new;

# Find all the tags and make sure they can be loaded
$t->get_ok("/")->status_is(200);
$t->element_count_is('script[src], link[href][rel=stylesheet]', 2);
$t->tx->res->dom->find("script[src], link[href][rel=stylesheet]")->each(sub {
  $t->get_ok($_->{href} || $_->{src})->status_is(200);
});

done_testing;

DESCRIPCIÓN

Mojolicious::Plugin::Webpack es un complemento de Mojolicious para facilitar el trabajo con https://webpack.js.org/ o https://rollupjs.org/. Este complemento...

1. Genere un package.json mínimo.json y un archivo de configuración Webpack o Rollup. Hacer esto manualmente es posible, pero puede llevar bastante tiempo descubrir todos los detalles si aún no está familiarizado con Webpack.

2. Cargue el punto de entrada "./assets/index.js", que es el punto de partida de su aplicación del lado cliente. El archivo de entrada puede cargar JavaScript, CSS, SASS,... siempre que esté cargado el complemento de procesamiento adecuado.

3. Puede resultar difícil saber exactamente qué complementos utilizar con Webpack. Debido a esto, Mojolicious::Plugin::Webpack tiene algunas reglas predefinidas para qué dependencias de Nodejs buscar e instalar. Sin embargo, ninguno de los módulos de nodejs es necesario en producción, por lo que solo se instalará durante el desarrollo.

4. Durante el desarrollo, el ejecutable del paquete web se iniciará automáticamente junto a Mojo::Server::Morbo. Webpack se iniciará con los modificadores apropiados para observar sus archivos fuente y volver a compilarlos en caso de cambio.

resumen

rollup.js es una alternativa a Webpack. Ambos logran más o menos lo mismo, pero de diferentes maneras.

Para poder utilizar el paquete acumulativo, debe cargar este complemento con un motor diferente:

$app->plugin(Webpack => {engine => 'Mojo::Alien::rollup', process => [qw(js css)]});

Aviso

Mojolicious::Plugin::Webpack es actualmente EXPERIMENTAL.

AYUDANTES

activo

# Call a method or access an attribute in this class
my $path = $app->asset->engine->out_dir;

# Call a method, but from inside a mojo template
%= asset->url_for($c, "cool_beans.css")

# Generate a HTML tag
my $bytestream = $c->asset("cool_beans.js", @args);

# Generate a HTML tag, but from inside a mojo template
%= asset "cool_beans.css", media => "print"
%= asset(url_for => "cool_beans.css")

El uso más básico de este asistente es crear una etiqueta HTML usando "javascript" en Mojolicious::Plugin::TagHelpers o "hoja de estilo" en Mojolicious::Plugin::TagHelpers si se pasa un nombre de activo válido.

Por otro lado, el asistente devolverá la instancia del complemento si no se pasan argumentos, lo que le permitirá llamar a cualquiera de los "MÉTODOS" o acceder a los "ATRIBUTOS".

MANOS

antes_webpack_start

$app->before_webpack_start(sub { my $webpack = shift; ... });

Emitido justo antes de que el complemento comience a compilarse o cargarse en los activos generados. Útil si desea cambiar cualquiera de los atributos del "motor" predeterminados.

ATRIBUTOS

motor

$engine = $webpack->engine;

Devuelve un objeto Mojo::Alien::webpack o Mojo::Alien::rollup.

MÉTODOS

mapa_activos

$hash_ref = $webpack->asset_map;

Lee todos los archivos generados en "asset_path" y devuelve un hash-ref como este:

{
  "relative/output.js" => {               # Key is a friendly name, withouc checksum
    ext      => 'css',                    # File extension
    helper   => 'javascript',             # Mojolicious helper used to render the asset
    rel_name => "relative/output.xyz.js", # Relative filename with checksum
  },
  ...
}

Tenga en cuenta que cambiar este hash podría cambiar el comportamiento de "asset" y "url_for".

registro

$webpack->register($app, %config);
$app->plugin("Webpack", %config);

Se utiliza para registrar este complemento en su aplicación Mojolicious.

El %config pasado al cargar este complemento puede tener cualquiera de estos atributos:

• ruta_activo

  Se puede utilizar para especificar un directorio estático alternativo al que enviar los activos creados.

  Valor predeterminado: "/activo".

• control_caché

  Se utiliza para configurar el encabezado de respuesta "Cache-Control" para recursos creados.

  Valor predeterminado: "no-cache" durante el desarrollo y "max-age=86400" en producción.

• motor

  Debe ser un nombre de clase de motor válido. Ejemplos:

    $app->plugin("Webpack", {engine => 'Mojo::Alien::rollup'});
    $app->plugin("Webpack", {engine => 'Mojo::Alien::webpack'});

  Predeterminado: Mojo::Alien::webpack.

• ayudante

  Nombre del ayudante que se agregará a su solicitud.

  Valor predeterminado: "activo".

• proceso

  Se utiliza para especificar "incluir" en Mojo::Alien::webpack o "incluir" en Mojo::Alien::rollup.

  Predeterminado: ['js'] .

URL_para

$url = $webpack->url_for($c, $asset_name);

Devuelve un Mojo::URL para un activo determinado.

AUTOR

Jan Henning Thorsen

DERECHOS DE AUTOR Y LICENCIA

Copyright (C) Jan Henning Thorsen

Este programa es software libre, puedes redistribuirlo y/o modificarlo bajo los términos de la Licencia Artística versión 2.0.

VER TAMBIÉN

Mojo::Alien::rollup, Mojo::Alien::webpack.