mojolicious plugin webpack
1.0.0
Mojolicious::Plugin::Webpack - Mojolicious ♥ Webpack
Crie um arquivo "./assets/index.js" relativo ao diretório do seu aplicativo com o seguinte conteúdo:
console.log('Cool beans!');Seu aplicativo Mojolicious precisa carregar o plugin Mojolicious::Plugin::Webpack e informar que tipo de ativos ele deve ser capaz de processar:
$app->plugin(Webpack => {process => [qw(js css)]});Consulte "registrar" para obter mais opções de configuração.
Para incluir os ativos gerados em seu modelo, você pode usar o auxiliar "asset":
%= asset "cool_beans.css" %= asset "cool_beans.js"
Você pode iniciar a aplicação usando daemon , hypnotoad ou qualquer servidor Mojolicious que desejar, mas se quiser um desenvolvimento rápido você deve usar mojo webpack , que é uma alternativa ao morbo :
$ mojo webpack -h $ mojo webpack ./script/myapp.pl
No entanto, se você quiser usar outro daemon e forçar a execução webpack , você precisa definir a variável de ambiente MOJO_WEBPACK_BUILD como "1". Exemplo:
MOJO_WEBPACK_BUILD=1 ./script/myapp.pl daemon
Se quiser ter certeza de que construiu todos os ativos, você pode criar um arquivo de teste como "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 é um plugin Mojolicious para facilitar o trabalho com https://webpack.js.org/ ou https://rollupjs.org/. Este plugin irá...
Gere um package.json mínimo e um arquivo de configuração Webpack ou Rollup. Fazer isso manualmente é possível, mas pode levar muito tempo para descobrir todos os detalhes se você ainda não estiver familiarizado com o Webpack.
Carregue o ponto de entrada "./assets/index.js", que é o ponto inicial do seu aplicativo do lado do cliente. O arquivo de entrada pode carregar JavaScript, CSS, SASS, ... desde que o plugin de processamento apropriado seja carregado.
Pode ser difícil saber exatamente quais plugins usar com o Webpack. Por causa disso, Mojolicious::Plugin::Webpack tem algumas regras predefinidas para as quais as dependências do Nodejs devem ser buscadas e instaladas. Porém, nenhum dos módulos nodejs é necessário na produção, portanto, ele só será instalado durante o desenvolvimento.
Durante o desenvolvimento, o executável do webpack será iniciado automaticamente próximo ao Mojo::Server::Morbo. O Webpack será iniciado com as opções apropriadas para observar seus arquivos de origem e recompilar conforme as alterações.
rollup.js é uma alternativa ao Webpack. Ambos realizam mais ou menos a mesma coisa, mas de maneiras diferentes.
Para poder usar o rollup, você precisa carregar este plugin com um mecanismo diferente:
$app->plugin(Webpack => {engine => 'Mojo::Alien::rollup', process => [qw(js css)]});Mojolicious::Plugin::Webpack é atualmente EXPERIMENTAL.
# 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")O uso mais básico deste auxiliar é criar uma tag HTML usando "javascript" em Mojolicious::Plugin::TagHelpers ou "stylesheet" em Mojolicious::Plugin::TagHelpers se um nome de ativo válido for passado.
Por outro lado, o helper retornará a instância do plugin se nenhum argumento for passado, permitindo chamar qualquer um dos "MÉTODOS" ou acessar os "ATRIBUTOS".
$app->before_webpack_start(sub { my $webpack = shift; ... });Emitido logo antes do plugin começar a construir ou carregar os ativos gerados. Útil se você deseja alterar qualquer um dos atributos do "mecanismo" dos padrões.
$engine = $webpack->engine;
Retorna um objeto Mojo::Alien::webpack ou Mojo::Alien::rollup.
$hash_ref = $webpack->asset_map;
Lê todos os arquivos gerados em "asset_path" e retorna um hash-ref como este:
{
"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
},
...
}Observe que alterar esse hash pode alterar o comportamento de "asset" e "url_for"!
$webpack->register($app, %config);
$app->plugin("Webpack", %config);Usado para registrar este plugin em seu aplicativo Mojolicious.
O %config passado ao carregar este plugin pode ter qualquer um destes atributos:
caminho_do_asset
Pode ser usado para especificar um diretório estático alternativo para o qual gerar os ativos construídos.
Padrão: "/ativo".
cache_control
Usado para definir o cabeçalho de resposta "Cache-Control" para ativos construídos.
Padrão: "no-cache" durante o desenvolvimento e "max-age=86400" na produção.
motor
Deve ser um nome de classe de mecanismo válido. Exemplos:
$app->plugin("Webpack", {engine => 'Mojo::Alien::rollup'});
$app->plugin("Webpack", {engine => 'Mojo::Alien::webpack'});Padrão: Mojo::Alien::webpack.
ajudante
Nome do auxiliar que será adicionado ao seu aplicativo.
Padrão: "ativo".
processo
Usado para especificar "include" em Mojo::Alien::webpack ou "include" em Mojo::Alien::rollup.
Padrão: ['js'] .
$url = $webpack->url_for($c, $asset_name);
Retorna um Mojo::URL para um determinado ativo.
Jan Henning Thorsen
Direitos autorais (C) Jan Henning Thorsen
Este programa é um software livre, você pode redistribuí-lo e/ou modificá-lo sob os termos da Licença Artística versão 2.0.
Mojo::Alien::rollup, Mojo::Alien::webpack.
