mojolicious plugin webpack
1.0.0
Mojolicious::ปลั๊กอิน::Webpack - Mojolicious ♥ Webpack
สร้างไฟล์ "./assets/index.js" ที่สัมพันธ์กับไดเร็กทอรีแอปพลิเคชันของคุณโดยมีเนื้อหาดังต่อไปนี้:
console.log('Cool beans!');แอปพลิเคชัน Mojolicious ของคุณจะต้องโหลดปลั๊กอิน Mojolicious::Plugin::Webpack และบอกว่าควรประมวลผลเนื้อหาประเภทใด:
$app->plugin(Webpack => {process => [qw(js css)]});ดู "ลงทะเบียน" สำหรับตัวเลือกการกำหนดค่าเพิ่มเติม
หากต้องการรวมเนื้อหาที่สร้างขึ้นในเทมเพลตของคุณ คุณสามารถใช้ตัวช่วย "asset":
%= asset "cool_beans.css" %= asset "cool_beans.js"
คุณสามารถเริ่มแอปพลิเคชันโดยใช้ daemon , hypnotoad หรือเซิร์ฟเวอร์ Mojolicious ที่คุณต้องการ แต่ถ้าคุณต้องการการพัฒนาอย่างรวดเร็ว คุณควรใช้ mojo webpack ซึ่งเป็นทางเลือกแทน morbo :
$ mojo webpack -h $ mojo webpack ./script/myapp.pl
อย่างไรก็ตาม หากคุณต้องการใช้ daemon อื่นและบังคับให้ 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 เป็นปลั๊กอิน Mojolicious ที่ช่วยให้ทำงานกับ https://webpack.js.org/ หรือ https://rollupjs.org/ ได้ง่ายขึ้น ปลั๊กอินนี้จะ...
สร้าง 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 ทั้งสองบรรลุผลสำเร็จในสิ่งเดียวกันไม่มากก็น้อย แต่ในรูปแบบที่ต่างกัน
เพื่อให้สามารถใช้ Rollup ได้ คุณต้องโหลดปลั๊กอินนี้ด้วยเอ็นจิ้นอื่น:
$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")การใช้งานขั้นพื้นฐานที่สุดของตัวช่วยนี้คือการสร้างแท็ก HTML โดยใช้ "javascript" ใน Mojolicious::Plugin::TagHelpers หรือ "stylesheet" ใน Mojolicious::Plugin::TagHelpers หากมีการส่งผ่านชื่อเนื้อหาที่ถูกต้อง
ในทางกลับกัน ตัวช่วยจะส่งคืนอินสแตนซ์ปลั๊กอินหากไม่มีการส่งผ่านอาร์กิวเมนต์ ทำให้คุณสามารถเรียก "วิธีการ" ใดๆ หรือเข้าถึง "คุณลักษณะ" ได้
$app->before_webpack_start(sub { my $webpack = shift; ... });ปล่อยออกมาก่อนที่ปลั๊กอินจะเริ่มสร้างหรือโหลดเนื้อหาที่สร้างขึ้น มีประโยชน์หากคุณต้องการเปลี่ยนแอตทริบิวต์ "เครื่องยนต์" ใด ๆ จากค่าเริ่มต้น
$engine = $webpack->engine;
ส่งกลับวัตถุ Mojo::Alien::webpack หรือ Mojo::Alien::rollup
$hash_ref = $webpack->asset_map;
อ่านไฟล์ที่สร้างขึ้นทั้งหมดใน "asset_path" และส่งคืน hash-ref ดังนี้:
{
"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_path
สามารถใช้เพื่อระบุไดเร็กทอรีสแตติกสำรองเพื่อส่งออกสินทรัพย์ที่สร้างขึ้นไป
ค่าเริ่มต้น: "/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
ผู้ช่วย
ชื่อผู้ช่วยที่จะเพิ่มในใบสมัครของคุณ
ค่าเริ่มต้น: "สินทรัพย์"
กระบวนการ
ใช้เพื่อระบุ "include" ใน Mojo::Alien::webpack หรือ "include" ใน Mojo::Alien::rollup
ค่าเริ่มต้น: ['js']
$url = $webpack->url_for($c, $asset_name);
ส่งคืน Mojo::URL สำหรับเนื้อหาที่กำหนด
ยาน เฮนนิง ธอร์เซน
ลิขสิทธิ์ (C) แจน เฮนนิ่ง ธอร์เซน
โปรแกรมนี้เป็นซอฟต์แวร์ฟรี คุณสามารถแจกจ่ายและ/หรือแก้ไขได้ภายใต้เงื่อนไขของ Artistic License เวอร์ชัน 2.0
โมโจ::เอเลี่ยน::โรลอัพ โมโจ::เอเลี่ยน::webpack
