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 "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의 "스타일시트"를 사용하여 HTML 태그를 생성하는 것입니다.
반면에 인수가 전달되지 않으면 도우미는 플러그인 인스턴스를 반환하므로 "METHODS"를 호출하거나 "ATTRIBUTES"에 액세스할 수 있습니다.
$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 다음 속성 중 하나가 포함될 수 있습니다.
자산 경로
빌드된 자산을 출력할 대체 정적 디렉터리를 지정하는 데 사용할 수 있습니다.
기본값: "/자산".
캐시 제어
빌드된 자산에 대한 응답 "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) Jan Henning Thorsen
이 프로그램은 무료 소프트웨어이므로 Artistic License 버전 2.0의 조건에 따라 재배포 및/또는 수정할 수 있습니다.
Mojo::Alien::롤업, Mojo::Alien::webpack.
