Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wellguimaraes/webpack-riot-sample

Um breve exemplo de uso do Webpack com Riot e Sass
https://github.com/wellguimaraes/webpack-riot-sample

Last synced: 12 days ago
JSON representation

Um breve exemplo de uso do Webpack com Riot e Sass

Awesome Lists containing this project

README 

        
Intro





    De maneira simples, podemos definir o webpack como um empacotador de módulos (javascript e cia):

    pega um asset aqui e outro ali e os transforma em algo que você possa rodar. Parece algo trivial,

    mas pode ser trabalhoso. É aí que entra o webpack pra facilitar um pouco bastante a vida.





    Se você já conhece/usa o Browserify, deve me perguntar por quê trocaria seis por meia dúzia.

    Bom, embora o webpack seja “vendido” como um simples bundler, dois

    pontos o tornam bem mais do que meia dúzia:



    

        
  1. 

            na maioria dos casos podemos abrir mão das ferramentas de automação de tarefas (Grunt/Gulp)

            utilizando loaders, que fazem o pré-processamento de arquivos “diferentes”

            (coffee, es6, ts, sass, less, jade, imagens, etc) e os tornam “utilizáveis” com um banal require;

        
    2. 

        
  2. 

            em aplicações maiores, onde as coisas começam a ficar mais pesadas, o webpack

            traz a possibilidade de carregar dependências sob demanda (code splitting), sem precisar

            colocar tudo num grande e pesado bundle.

        
    3. 




Quero ver na prática!





    Para clarear o entendimento, vamos construir um exemplo de uso do webpack utilizando Riot (custom tags) e Sass.






    A estrutura do nosso exemplo vai ficar assim:





    webpack-sample/

        app/

            tags/

        public/

            bundles/






    Com a estrutura pronta, crie o arquivo /public/main.html





    <!DOCTYPE html>

    <html>

    <head>

        <title>Webpack sample</title>

    </head>

    <body>

        <my-app></my-app>

        <script src="bundles/main/bundle.js"></script>

    </body>

    </html>






    Você deve ter observado que foi usada a tag my-app, que é na verdade uma custom tag

    que iremos criar mais a frente. Por enquanto, ela simplesmente não vai ter efeito.





    Agora crie o arquivo app/main.js, que será o ponto de partida da aplicação.




    document.write('deu certo!');





    Agora que já temos alguns arquivos para experimentar o webpack, vamos aos preparativos.

    Inicialize o npm no diretório raiz e instale os pacotes que iremos utilizar neste exemplo:




    npm init

    npm install -g webpack

    npm install --save-dev webpack

    npm install --save-dev riot riotjs-loader

    npm install --save-dev css-loader style-loader node-sass sass-loader





    O webpack pode ser utilizado sem um arquivo de configuração, mas vamos pular esse passo basicão e cair dentro

    do jeito legal de usá-lo. Crie na raiz do projeto o arquivo webpack.config.js.

    Vamos começar com a seguinte configuração:





    module.exports = {

        entry: {

            main: './app/main.js'

        },

        output: {

            path: __dirname + '/public/bundles',

            filename: "[name]/bundle.js"

        }

    }






    Criado o arquivo de configuração, podemos então rodar o webpack no diretório raiz com o comando:





    webpack






    Observe que o bundle foi gerado, e agora está no diretório /public/bundles/main, conforme havíamos configurado.

    Ao abrir o arquivo /public/main.html agora, veremos um "deu certo" na tela, obra do main.js.





    Bom, até aqui, nada de mais. Seguimos então para os passos mais legais. Criemos a tag my-app com o

    arquivo /app/tags/my-app.tag:





    Obs.: a sintaxe de custom tags do Riot é bem simples de entender, e para este exemplo, não é preciso

        dominá-la. Mas caso queira conhecer melhor antes de continuar,

        dê uma olhada no Riot guide.

    




    <my-app>

        <div>

            Hello, I'm a custom tag.

            <button onclick={toggleLipsum} class={active: lipsumVisible}>More info</button>

            <lipsum if={lipsumVisible}></lipsum>

        </div>



        <style>{styles}</style>



        <script>

            // Aqui carregamos um arquivo SASS

            this.styles = require('./my-app.scss');

            this.lipsumVisible = false;



            this.toggleLipsum = function() {

                this.lipsumVisible = !this.lipsumVisible;



                if (this.lipsumVisible)

                    // A tag <lipsum> será carregada sob demanda

                    // somente quando for necessária

                    require(['./lipsum.tag'], function() {

                        window.riot.mount("lipsum");

                    });

            };

        </script>

    </my-app>





    Observe que dentro da tag my-app utilizamos a custom tag lipsum e um botão cujo

    clique executa a função toggleLipsum para habilitar/desabilitar a exibiçao da tag lipsum.

    Sabendo que a tag lipsum não é necessária no momento em que a tag my-app é

    renderizada (já que o comportamento padrão é ocultá-la), podemos optar por carregá-la somente quando houver

    demanda. Para isso, como você pode observar no código acima, utilizamos require com um callback para

    ser executado após a carga dos assets demandados.





    Agora vamos criar as dependências que faltam. Ainda dentro do diretório /app/tags

    crie os arquivos my-app.scss e lipsum.tag:





    $default-color: blue;

    $active-color: red;



    button {

        background: $default-color;

        border: 0;

        color: white;

        outline: none;



        &.active {

            background: $active-color;

        }

    }




    <lipsum>

        <div>

            Lorem ipsum dolor sit amet, consectetur adipisicing elit.

        </div>

    </lipsum>





    Ahhh, e agora que temos as custom tags criadas, podemos substituir o conteúdo do /app/main.js

    para renderizar as tags no devido lugar:





    window.riot = require('riot');

    require('./tags/my-app.tag');

    window.riot.mount('*');






    Se rodássemos o webpack novamente, não teríamos sucesso, já que ele ainda não sabe lidar com arquivos .scss

    e .tag.

    Para resolver, voltamos ao webpack.config.js:





    var webpack = require('webpack');



    module.exports = {

      entry: {

          main: './app/main.js'

      },

      output: {

        path: __dirname + '/public/bundles',

        filename: '[name]/bundle.js',

        chunkFilename: '[id]/bundle.js',

        publicPath: '/public/bundles/'

      },

      plugins: [

        new webpack.ProvidePlugin({ riot: 'riot' })

      ],

      module: {

        loaders: [

          { test: /\.tag$/, loader: 'riotjs-loader'},

          { test: /\.scss$/, loaders: ['style', 'css', 'sass'] }

        ]

      }

    };





    As configurações cresceram um pouco, mas o entendimento continua fácil.

    Adicionamos os pre-loaders para arquivos .tag e .scss, e como temos agora carga sob demanda, o

    webpack criará bundles separados para estes assets, que serão nomeados conforme o

    padrão definido por chunkFilename e estarão acessíveis a partir do diretório publicPath

    (que poderia ser também uma URL apontando para um CDN).





    Agora basta rodar o webpack novamente e abrir /public/main.html para ver tudo funcionando! ;)





    

        Obs.: utilize a flag -p caso queira gerar o bundle minificado e --watch

        para monitorar mudanças nas dependências e gerar novo bundle em caso de mudanças.

    







    O código criado neste artigo está disponível no GitHub: https://github.com/wellguimaraes/webpack-sample