mojolicious plugin webpack
1.0.0
Mojolicious::Plugin::Webpack - Mojolicious ♥ Webpack
Erstellen Sie relativ zu Ihrem Anwendungsverzeichnis eine Datei „./assets/index.js“ mit folgendem Inhalt:
console.log('Cool beans!');Ihre Mojolicious-Anwendung muss das Mojolicious::Plugin::Webpack-Plugin laden und ihm mitteilen, welche Art von Assets sie verarbeiten können soll:
$app->plugin(Webpack => {process => [qw(js css)]});Weitere Konfigurationsmöglichkeiten finden Sie unter „Registrieren“.
Um die generierten Assets in Ihre Vorlage einzubinden, können Sie den „Asset“-Helfer verwenden:
%= asset "cool_beans.css" %= asset "cool_beans.js"
Sie können die Anwendung mit daemon , hypnotoad oder einem beliebigen Mojolicious-Server starten. Wenn Sie jedoch eine schnelle Entwicklung wünschen, sollten Sie mojo webpack verwenden, eine Alternative zu morbo :
$ mojo webpack -h $ mojo webpack ./script/myapp.pl
Wenn Sie jedoch einen anderen Daemon verwenden und die Ausführung webpack erzwingen möchten, müssen Sie die Umgebungsvariable MOJO_WEBPACK_BUILD auf „1“ setzen. Beispiel:
MOJO_WEBPACK_BUILD=1 ./script/myapp.pl daemon
Wenn Sie sicherstellen möchten, dass Sie alle Assets erstellt haben, können Sie eine Testdatei wie „build-assets.t“ erstellen:
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;Mojolicious::Plugin::Webpack ist ein Mojolicious-Plugin, das die Arbeit mit https://webpack.js.org/ oder https://rollupjs.org/ erleichtert. Dieses Plugin wird...
Generieren Sie eine minimale package.json und eine Webpack- oder Rollup-Konfigurationsdatei. Dies manuell zu tun ist möglich, aber es kann ziemlich zeitaufwändig sein, alle Details herauszufinden, wenn Sie mit Webpack noch nicht vertraut sind.
Laden Sie den Einstiegspunkt „./assets/index.js“, der den Ausgangspunkt Ihrer clientseitigen Anwendung darstellt. Die Eintragsdatei kann JavaScript, CSS, SASS, ... laden, solange das entsprechende Verarbeitungs-Plugin geladen ist.
Es kann schwierig sein, genau zu wissen, welche Plugins mit Webpack verwendet werden sollen. Aus diesem Grund verfügt Mojolicious::Plugin::Webpack über einige vordefinierte Regeln, nach denen Nodejs-Abhängigkeiten abgerufen und installiert werden sollen. In der Produktion ist jedoch keines der NodeJS-Module erforderlich, sodass es nur während der Entwicklung installiert wird.
Während der Entwicklung wird die ausführbare Webpack-Datei automatisch neben Mojo::Server::Morbo gestartet. Webpack wird mit den entsprechenden Schaltern gestartet, um Ihre Quelldateien zu überwachen und bei Änderungen neu zu kompilieren.
rollup.js ist eine Alternative zu Webpack. Beide erreichen mehr oder weniger das Gleiche, allerdings auf unterschiedliche Weise.
Um Rollup nutzen zu können, müssen Sie dieses Plugin mit einer anderen Engine laden:
$app->plugin(Webpack => {engine => 'Mojo::Alien::rollup', process => [qw(js css)]});Mojolicious::Plugin::Webpack ist derzeit EXPERIMENTAL.
# 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")Die einfachste Verwendung dieses Helfers besteht darin, ein HTML-Tag mit „javascript“ in Mojolicious::Plugin::TagHelpers oder „stylesheet“ in Mojolicious::Plugin::TagHelpers zu erstellen, wenn ein gültiger Asset-Name übergeben wird.
Andererseits gibt der Helfer die Plugin-Instanz zurück, wenn keine Argumente übergeben werden, sodass Sie eine der „METHODEN“ aufrufen oder auf die „ATTRIBUTE“ zugreifen können.
$app->before_webpack_start(sub { my $webpack = shift; ... });Wird direkt ausgegeben, bevor das Plugin mit dem Erstellen oder Laden der generierten Assets beginnt. Nützlich, wenn Sie eines der „Engine“-Attribute von den Standardwerten ändern möchten.
$engine = $webpack->engine;
Gibt ein Mojo::Alien::webpack- oder Mojo::Alien::rollup-Objekt zurück.
$hash_ref = $webpack->asset_map;
Liest alle generierten Dateien in „asset_path“ und gibt eine Hash-Referenz wie diese zurück:
{
"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
},
...
}Beachten Sie, dass eine Änderung dieses Hashs das Verhalten von „asset“ und „url_for“ ändern kann!
$webpack->register($app, %config);
$app->plugin("Webpack", %config);Wird verwendet, um dieses Plugin in Ihrer Mojolicious-App zu registrieren.
Die beim Laden dieses Plugins übergebene %config kann eines dieser Attribute haben:
asset_path
Kann verwendet werden, um ein alternatives statisches Verzeichnis anzugeben, in das die erstellten Assets ausgegeben werden sollen.
Standard: „/asset“.
Cache_Control
Wird verwendet, um den Antwortheader „Cache-Control“ für erstellte Assets festzulegen.
Standard: „no-cache“ während der Entwicklung und „max-age=86400“ in der Produktion.
Motor
Muss ein gültiger Engine-Klassenname sein. Beispiele:
$app->plugin("Webpack", {engine => 'Mojo::Alien::rollup'});
$app->plugin("Webpack", {engine => 'Mojo::Alien::webpack'});Standard: Mojo::Alien::webpack.
Helfer
Name des Helfers, der Ihrer Anwendung hinzugefügt wird.
Standard: „Asset“.
Verfahren
Wird verwendet, um „include“ in Mojo::Alien::webpack oder „include“ in Mojo::Alien::rollup anzugeben.
Standard: ['js'] .
$url = $webpack->url_for($c, $asset_name);
Gibt eine Mojo::URL für ein bestimmtes Asset zurück.
Jan Henning Thorsen
Copyright (C) Jan Henning Thorsen
Bei diesem Programm handelt es sich um kostenlose Software. Sie können es unter den Bedingungen der Artistic License Version 2.0 weiterverbreiten und/oder ändern.
Mojo::Alien::rollup, Mojo::Alien::webpack.
