mojolicious plugin webpack

اسم

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 تريده، ولكن إذا كنت تريد التطوير السريع، فيجب عليك استخدام mojo webpack ، وهو بديل لـ morbo :

$ 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 هو مكون إضافي من Mojolicious لتسهيل العمل مع https://webpack.js.org/ أو https://rollupjs.org/. هذا البرنامج المساعد سوف...

1. قم بإنشاء ملف package.json بالحد الأدنى وملف تكوين Webpack أو Rollup. من الممكن القيام بذلك يدويًا، ولكن قد يستغرق الأمر وقتًا طويلاً لمعرفة كل الأجزاء والأجزاء إذا لم تكن على دراية بـ Webpack بالفعل.

2. قم بتحميل نقطة الإدخال "./assets/index.js"، وهي نقطة البداية للتطبيق من جانب العميل. يمكن لملف الإدخال تحميل JavaScript، وCSS، وSASS، ... طالما تم تحميل البرنامج الإضافي المناسب للمعالجة.

3. قد يكون من الصعب معرفة المكونات الإضافية التي يجب استخدامها مع Webpack بالضبط. ولهذا السبب، يحتوي Mojolicious::Plugin::Webpack على بعض القواعد المحددة مسبقًا والتي يجب جلب وتثبيت تبعيات Nodejs لها. على الرغم من ذلك، ليست هناك حاجة إلى أي من وحدات Nodejs في الإنتاج، لذلك سيتم تثبيتها فقط أثناء التطوير.

4. أثناء التطوير، سيتم تشغيل حزمة الويب القابلة للتنفيذ تلقائيًا بجوار 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")

الاستخدام الأساسي لهذا المساعد هو إنشاء علامة HTML باستخدام "javascript" في Mojolicious::Plugin::TagHelpers أو "ورقة الأنماط" في Mojolicious::Plugin::TagHelpers إذا تم تمرير اسم أصل صالح.

من ناحية أخرى، سيعيد المساعد نسخة البرنامج المساعد إذا لم يتم تمرير أي وسائط، مما يسمح لك باستدعاء أي من "الطرق" أو الوصول إلى "السمات".

خطافات

before_webpack_start

$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_path

  يمكن استخدامه لتحديد دليل ثابت بديل لإخراج الأصول المضمنة إليه.

  الافتراضي: "/ الأصول".

• Cache_control

  يُستخدم لتعيين رأس الاستجابة "التحكم في ذاكرة التخزين المؤقت" للأصول المضمنة.

  الافتراضي: "no-cache" أثناء التطوير و"max-age=86400" في الإنتاج.

• محرك

  يجب أن يكون اسم فئة المحرك صالحًا. أمثلة:

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

  الافتراضي: موجو::Alien::webpack.

• المساعد

  اسم المساعد الذي سيتم إضافته إلى التطبيق الخاص بك.

  الافتراضي: "الأصول".

• عملية

  يُستخدم لتحديد "تضمين" في Mojo::Alien::webpack أو "تضمين" في Mojo::Alien::rollup.

  الافتراضي: ['js'] .

url_for

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

تقوم بإرجاع Mojo::URL لأصل معين.

مؤلف

جان هينينج تورسن

حقوق الطبع والنشر والترخيص

حقوق الطبع والنشر (C) جان هينينج ثورسن

هذا البرنامج مجاني، ويمكنك إعادة توزيعه و/أو تعديله بموجب شروط الترخيص الفني الإصدار 2.0.

انظر أيضا

موجو::Alien::rollup، Mojo::Alien::webpack.