mojolicious plugin webpack
1.0.0
Mojolicious::Plugin::Webpack - Mojolicious ♥ Webpack
次の内容を含むファイル「./assets/index.js」をアプリケーション ディレクトリに相対的に作成します。
console.log('Cool beans!');Mojolicious アプリケーションは Mojolicious::Plugin::Webpack プラグインをロードし、どのような種類のアセットを処理できるかを指示する必要があります。
$app->plugin(Webpack => {process => [qw(js css)]});その他の設定オプションについては、「登録」を参照してください。
生成されたアセットをテンプレートに含めるには、「アセット」ヘルパーを使用できます。
%= asset "cool_beans.css" %= asset "cool_beans.js"
daemon 、 hypnotoad 、または任意の Mojolicious サーバーを使用してアプリケーションを開始できますが、迅速な開発が必要な場合は、 morboの代替となるmojo webpack使用する必要があります。
$ mojo webpack -h $ mojo webpack ./script/myapp.pl
ただし、別のデーモンを使用してwebpack強制的に実行する場合は、 MOJO_WEBPACK_BUILD環境変数を「1」に設定する必要があります。例：
MOJO_WEBPACK_BUILD=1 ./script/myapp.pl daemon
すべてのアセットをビルドしたことを確認したい場合は、「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;Mojolicious::Plugin::Webpack は、https://webpack.js.org/ または https://rollupjs.org/ との連携を容易にする Mojolicious プラグインです。このプラグインは...
最小限のpackage.jsonと Webpack または Rollup 構成ファイルを生成します。これを手動で行うことも可能ですが、Webpack にまだ慣れていない場合は、すべての部分を理解するのにかなりの時間がかかる可能性があります。
クライアント側アプリケーションの開始点であるエントリポイント「./assets/index.js」を読み込みます。適切な処理プラグインが読み込まれている限り、エントリ ファイルは JavaScript、CSS、SASS などを読み込むことができます。
Webpack でどのプラグインを使用すればよいかを正確に知るのは難しい場合があります。このため、Mojolicious::Plugin::Webpack には、Nodejs の依存関係を取得してインストールするための事前定義されたルールがいくつかあります。ただし、nodejs モジュールは実稼働環境では必要ないため、開発中にのみインストールされます。
開発中、Webpack 実行可能ファイルは Mojo::Server::Morbo の隣で自動的に開始されます。 Webpack は適切なスイッチを使用して開始され、ソース ファイルを監視し、変更時に再コンパイルされます。
rollup.js は Webpack の代替です。どちらも多かれ少なかれ同じことを達成しますが、方法は異なります。
ロールアップを使用できるようにするには、このプラグインを別のエンジンでロードする必要があります。
$app->plugin(Webpack => {engine => 'Mojo::Alien::rollup', process => [qw(js css)]});Mojolicious::Plugin::Webpack は現在実験版です。
# 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")このヘルパーの最も基本的な使用法は、有効なアセット名が渡された場合、Mojolicious::Plugin::TagHelpers の「javascript」または Mojolicious::Plugin::TagHelpers の「stylesheet」を使用して HTML タグを作成することです。
一方、引数が渡されない場合、ヘルパーはプラグイン インスタンスを返し、任意の「メソッド」を呼び出したり、「属性」にアクセスしたりできるようにします。
$app->before_webpack_start(sub { my $webpack = shift; ... });プラグインが生成されたアセットの構築または読み込みを開始する直前に発行されます。 「エンジン」属性をデフォルトから変更する場合に便利です。
$engine = $webpack->engine;
Mojo::Alien::webpack または Mojo::Alien::rollup オブジェクトを返します。
$hash_ref = $webpack->asset_map;
「asset_path」に生成されたすべてのファイルを読み取り、次のようなハッシュ参照を返します。
{
"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
},
...
}このハッシュを変更すると、「asset」と「url_for」の動作が変わる可能性があることに注意してください。
$webpack->register($app, %config);
$app->plugin("Webpack", %config);このプラグインを Mojolicious アプリに登録するために使用されます。
このプラグインをロードするときに渡される%configには、次の属性のいずれかを含めることができます。
アセットパス
ビルドされたアセットを出力する代替の静的ディレクトリを指定するために使用できます。
デフォルト:「/asset」。
キャッシュコントロール
構築されたアセットの応答「Cache-Control」ヘッダーを設定するために使用されます。
デフォルト: 開発中は「no-cache」、本番環境では「max-age=86400」。
エンジン
有効なエンジン クラス名である必要があります。例:
$app->plugin("Webpack", {engine => 'Mojo::Alien::rollup'});
$app->plugin("Webpack", {engine => 'Mojo::Alien::webpack'});デフォルト: Mojo::Alien::webpack。
ヘルパー
アプリケーションに追加されるヘルパーの名前。
デフォルト:「資産」。
プロセス
Mojo::Alien::webpack の「include」または Mojo::Alien::rollup の「include」を指定するために使用されます。
デフォルト: ['js'] 。
$url = $webpack->url_for($c, $asset_name);
指定されたアセットの Mojo::URL を返します。
ヤン・ヘニング・トーセン
著作権 (C) ヤン ヘニング トーセン
このプログラムはフリー ソフトウェアです。Artistic License バージョン 2.0 の条項に基づいて再配布したり、変更したりすることができます。
Mojo::Alien::rollup、Mojo::Alien::webpack。
