Mojolicious::Plugin::Webpack - Mojolicious ♥ Webpack
Buat file "./assets/index.js" yang berhubungan dengan direktori aplikasi Anda dengan konten berikut:
console.log('Cool beans!');
Aplikasi Mojolicious Anda perlu memuat plugin Mojolicious::Plugin::Webpack dan memberi tahu jenis aset apa yang dapat diproses:
$app->plugin(Webpack => {process => [qw(js css)]});
Lihat "daftar" untuk opsi konfigurasi lainnya.
Untuk menyertakan aset yang dihasilkan dalam templat Anda, Anda dapat menggunakan bantuan "aset":
%= asset "cool_beans.css" %= asset "cool_beans.js"
Anda dapat memulai aplikasi menggunakan daemon
, hypnotoad
atau server Mojolicious apa pun yang Anda inginkan, tetapi jika Anda ingin pengembangan cepat Anda harus menggunakan mojo webpack
, yang merupakan alternatif dari morbo
:
$ mojo webpack -h $ mojo webpack ./script/myapp.pl
Namun jika Anda ingin menggunakan daemon lain dan memaksa webpack
untuk berjalan, Anda perlu mengatur variabel lingkungan MOJO_WEBPACK_BUILD
ke "1". Contoh:
MOJO_WEBPACK_BUILD=1 ./script/myapp.pl daemon
Jika Anda ingin memastikan bahwa Anda telah membangun semua aset, Anda dapat membuat file pengujian seperti "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 adalah plugin Mojolicious untuk memudahkan bekerja dengan https://webpack.js.org/ atau https://rollupjs.org/. Plugin ini akan...
Hasilkan package.json
minimal dan file konfigurasi Webpack atau Rollup. Melakukan hal ini secara manual mungkin saja dilakukan, namun akan memakan waktu cukup lama untuk mengetahui seluruh bagiannya jika Anda belum terbiasa dengan Webpack.
Muat titik masuk "./assets/index.js", yang merupakan titik awal aplikasi sisi klien Anda. File entri dapat memuat JavaScript, CSS, SASS, ... selama plugin pemrosesan yang sesuai dimuat.
Mungkin sulit untuk mengetahui secara pasti plugin mana yang digunakan dengan Webpack. Karena itu Mojolicious::Plugin::Webpack memiliki beberapa aturan yang telah ditentukan sebelumnya untuk mengambil dan menginstal dependensi Nodejs. Tidak ada modul nodejs yang diperlukan dalam produksi, jadi modul hanya akan diinstal saat pengembangan.
Saat berkembang, webpack yang dapat dieksekusi akan dimulai secara otomatis di sebelah Mojo::Server::Morbo. Webpack akan dimulai dengan sakelar yang sesuai untuk melihat file sumber Anda dan mengkompilasi ulang jika ada perubahan.
rollup.js adalah alternatif untuk Webpack. Keduanya mencapai hal yang kurang lebih sama, tetapi dengan cara yang berbeda.
Untuk dapat menggunakan rollup, Anda harus memuat plugin ini dengan mesin yang berbeda:
$app->plugin(Webpack => {engine => 'Mojo::Alien::rollup', process => [qw(js css)]});
Mojolicious::Plugin::Webpack saat ini sedang EKSPERIMENTAL.
# 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")
Penggunaan paling dasar dari pembantu ini adalah untuk membuat tag HTML menggunakan "javascript" di Mojolicious::Plugin::TagHelpers atau "stylesheet" di Mojolicious::Plugin::TagHelpers jika nama aset yang valid dimasukkan.
Di sisi lain, helper akan mengembalikan instance plugin jika tidak ada argumen yang diteruskan, sehingga Anda dapat memanggil "METODE" mana pun atau mengakses "ATTRIBUT".
$app->before_webpack_start(sub { my $webpack = shift; ... });
Dipancarkan tepat sebelum plugin mulai membangun atau memuat aset yang dihasilkan. Berguna jika Anda ingin mengubah atribut "mesin" mana pun dari default.
$engine = $webpack->engine;
Mengembalikan objek Mojo::Alien::webpack atau Mojo::Alien::rollup.
$hash_ref = $webpack->asset_map;
Membaca semua file yang dihasilkan di "asset_path" dan mengembalikan hash-ref seperti ini:
{ "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 }, ... }
Perhatikan bahwa mengubah hash ini mungkin mengubah perilaku "aset" dan "url_for"!
$webpack->register($app, %config); $app->plugin("Webpack", %config);
Digunakan untuk mendaftarkan plugin ini ke aplikasi Mojolicious Anda.
%config
yang diteruskan saat memuat plugin ini dapat memiliki salah satu atribut berikut:
jalur_aset
Dapat digunakan untuk menentukan direktori statis alternatif untuk menghasilkan aset yang dibangun.
Bawaan: "/aset".
cache_control
Digunakan untuk menyetel respons header "Kontrol Cache" untuk aset yang dibangun.
Default: "no-cache" saat pengembangan dan "max-age=86400" dalam produksi.
mesin
Harus berupa nama kelas mesin yang valid. Contoh:
$app->plugin("Webpack", {engine => 'Mojo::Alien::rollup'}); $app->plugin("Webpack", {engine => 'Mojo::Alien::webpack'});
Bawaan: Mojo::Alien::webpack.
pembantu
Nama pembantu yang akan ditambahkan ke aplikasi Anda.
Bawaan: "aset".
proses
Digunakan untuk menentukan "sertakan" di Mojo::Alien::webpack atau "sertakan" di Mojo::Alien::rollup.
Bawaan: ['js']
.
$url = $webpack->url_for($c, $asset_name);
Mengembalikan Mojo::URL untuk aset tertentu.
Jan Henning Thorsen
Hak Cipta (C) Jan Henning Thorsen
Program ini adalah perangkat lunak gratis, Anda dapat mendistribusikan ulang dan/atau memodifikasinya berdasarkan ketentuan Lisensi Artistik versi 2.0.
Mojo::Alien::rollup, Mojo::Alien::webpack.