mojolicious plugin webpack

NOM

Mojolicious :: Plugin :: Webpack - Mojolicious ♥ Webpack

SYNOPSIS

Définir le point d'entrée

Créez un fichier "./assets/index.js" relatif au répertoire de votre application avec le contenu suivant :

console.log('Cool beans!');

Application

Votre application Mojolicious doit charger le plugin Mojolicious::Plugin::Webpack et lui indiquer le type d'actifs qu'elle doit pouvoir traiter :

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

Voir « s'inscrire » pour plus d'options de configuration.

Modèle

Pour inclure les ressources générées dans votre modèle, vous pouvez utiliser l'assistant "asset":

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

Exécutez l'application

Vous pouvez démarrer l'application en utilisant daemon , hypnotoad ou n'importe quel serveur Mojolicious de votre choix, mais si vous souhaitez un développement rapide, vous devez utiliser mojo webpack , qui est une alternative à morbo :

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

Cependant, si vous souhaitez utiliser un autre démon et forcer l'exécution webpack , vous devez définir la variable d'environnement MOJO_WEBPACK_BUILD sur "1". Exemple:

MOJO_WEBPACK_BUILD=1 ./script/myapp.pl daemon

Essai

Si vous voulez vous assurer que vous avez construit tous les actifs, vous pouvez créer un fichier de test comme "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;

DESCRIPTION

Mojolicious::Plugin::Webpack est un plugin Mojolicious pour faciliter le travail avec https://webpack.js.org/ ou https://rollupjs.org/. Ce plugin va...

1. Générez un package.json minimal et un fichier de configuration Webpack ou Rollup. Faire cela manuellement est possible, mais cela peut prendre beaucoup de temps pour comprendre tous les éléments si vous n'êtes pas déjà familier avec Webpack.

2. Chargez le point d'entrée "./assets/index.js", qui est le point de départ de votre application côté client. Le fichier d'entrée peut charger du JavaScript, CSS, SASS, ... à condition que le plugin de traitement approprié soit chargé.

3. Il peut être difficile de savoir exactement quels plugins utiliser avec Webpack. Pour cette raison, Mojolicious::Plugin::Webpack a des règles prédéfinies pour lesquelles les dépendances Nodejs doivent être récupérées et installées. Cependant, aucun des modules nodejs n'est requis en production, il ne sera donc installé que lors du développement.

4. Lors du développement, l'exécutable du webpack sera automatiquement démarré à côté de Mojo::Server::Morbo. Webpack sera démarré avec les commutateurs appropriés pour surveiller vos fichiers sources et les recompiler en cas de modification.

Cumul

rollup.js est une alternative à Webpack. Les deux accomplissent plus ou moins la même chose, mais de manière différente.

Pour pouvoir utiliser le rollup, vous devez charger ce plugin avec un moteur différent :

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

Avis

Mojolicious::Plugin::Webpack est actuellement EXPÉRIMENTAL.

AIDES

actif

# 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")

L'utilisation la plus basique de cet assistant consiste à créer une balise HTML en utilisant "javascript" dans Mojolicious::Plugin::TagHelpers ou "stylesheet" dans Mojolicious::Plugin::TagHelpers si un nom d'actif valide est transmis.

D'un autre côté, l'assistant renverra l'instance du plugin si aucun argument n'est transmis, vous permettant d'appeler l'une des "MÉTHODES" ou d'accéder aux "ATTRIBUTS".

CROCHETS

avant_webpack_start

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

Émis juste avant que le plugin ne commence à créer ou à charger les actifs générés. Utile si vous souhaitez modifier l'un des attributs "moteur" par défaut.

ATTRIBUTS

moteur

$engine = $webpack->engine;

Renvoie un objet Mojo::Alien::webpack ou Mojo::Alien::rollup.

MÉTHODES

carte_actifs

$hash_ref = $webpack->asset_map;

Lit tous les fichiers générés dans "asset_path" et renvoie une référence de hachage comme celle-ci :

{
  "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
  },
  ...
}

Notez que changer ce hachage peut changer le comportement de "asset" et "url_for" !

registre

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

Utilisé pour enregistrer ce plugin dans votre application Mojolicious.

Le %config transmis lors du chargement de ce plugin peut avoir l'un de ces attributs :

• chemin_actif

  Peut être utilisé pour spécifier un répertoire statique alternatif vers lequel afficher les actifs construits.

  Par défaut : "/actif".

• cache_control

  Utilisé pour définir l'en-tête de réponse « Cache-Control » pour les actifs construits.

  Par défaut : "no-cache" lors du développement et "max-age=86400" en production.

• moteur

  Il doit s'agir d'un nom de classe de moteur valide. Exemples :

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

  Par défaut : Mojo :: Alien :: webpack.

• auxiliaire

  Nom de l'assistant qui sera ajouté à votre candidature.

  Par défaut : « actif ».

• processus

  Utilisé pour spécifier "include" dans Mojo::Alien::webpack ou "include" dans Mojo::Alien::rollup.

  Par défaut : ['js'] .

url_pour

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

Renvoie un Mojo::URL pour un actif donné.

AUTEUR

Jan Henning Thorsen

DROIT D'AUTEUR ET LICENCE

Copyright (C) Jan Henning Thorsen

Ce programme est un logiciel libre, vous pouvez le redistribuer et/ou le modifier selon les termes de la Licence Artistique version 2.0.

VOIR AUSSI

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