Desenvolvendo com o auxílio de Webpack

novembro 10, 2016 12:00 pm Publicado por Deixe um comentário

Olá, venho mostrar uma maneira boa de organizar seu projeto com auxílio de Webpack, uma ferramenta que facilita a manutenção do sistema durante todo desenvolvimento.

Na Taller, estamos usando ES6 para projetos de multinacionais até projetos pequenos para validação rápida no mercado.

No ES6, você cria classes com uma sintaxe muito simples e objetiva.

Durante o desenvolvimento do sistema, precisamos criar várias classes e acontece o momento de essas classes conversarem entre elas, formando assim o sistema em si – assim como corpo humano, em que cada parte tem sua devida função e todas juntas formam um sistema funcionando, podemos criar uma classe para cada parte do corpo, e todas essas partes vão precisar estar conectadas umas às outras conversando entre si.

Uma boa prática é organizar cada classe em um arquivo para ficar fácil a manutenção do sistema. Com menos código para ler, o desenvolvedor consegue trabalhar apenas com o que é necessário focando na “regra de negócio”.

No NodeJS, para uma classe conversar com outra classe, é necessário usar require:

require("caminho-do-arquivo")

Existem duas maneiras de informar o caminho do arquivo: informando um caminho completo desde a raiz do HD, ou um caminho relativo ao caminho do arquivo que está chamando.

require("/var/opt/sistema-simples/src/modules/pessoas/ClasseConnexaoPessoa")

ou

require("../../../src/modules/pessoas/ClasseConnexaoPessoa")

Não é bom utilizar o caminho completo do seu computador. Um motivo pra isso é que cada desenvolvedor tem seu computador em pastas diferentes – alguns usam Linux, outros com MAC, existem até aqueles que usam Windows ainda.

windows-xp-nostalgia

Usar o caminho completo acaba tornando seu projeto limitado em questões de ambiente de desenvolvimento.

Também não é legal ficar informando caminhos relativos, pois quando você precisa refatorar seu código, muitos arquivos podem mudar de nome ou até mesmo de pasta, porque as divisões de responsabilidade vão se adaptando às regras de negócio. Quando isso acontece, você precisa ficar alterando vários arquivos, ajustando o caminho antigo para o novo.

Isso gera um retrabalho desnecessário – na daily, está sujeito você dizer que levou a manhã toda apenas ajustando o nome nos arquivos.

Uma opção é usar Webpack

Com Webpack, você conta com um recurso chamado resolvers. Com ele, você pode especificar um caminho mais objetivo, o caminho raiz do seu projeto.

require("app/modules/pessoas/ClasseConnexaoPessoa")

O Webpack pode auxiliar mapeando app/ sempre para a raiz do diretório.

Isso facilita muito nosso trabalho, pois ganhamos espaço no tempo para fazer o que realmente importa. Durante a refatoração do código, isso contribui muito para o desenvolvimento do sistema de maneira mais tranquila.

Outro recurso muito legal do Webpack é que ele junta todos os arquivos em um só. Isso facilita o deploy, sendo o deploy de um arquivo só, tornando mais rápido o carregamento do seu sistema, pois o NodeJS só precisa ler um arquivo e já lê tudo de uma vez.

Você também pode pedir para o Webpack auxílio na tradução do ES6 em JavaScript puro, assim como minificar seus arquivos. O motor V8 do NodeJS gerencia melhor classes pequenas, já que quando as classes são grandes o processamento é mais lento.

Minificando seu código, você garante um processamento mais otimizado nas regras de negócio.

Você também pode carregar outros tipos de arquivos para serem compactados junto com o executável do seu sistema. Arquivos .ini, .pem, .json, .key

const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')

module.exports = {
  devtool: 'cheap-module-source-map',
  debug: false,

  // Aqui é espeficado que a aplicação será executada via backend
  target: 'node',

  // Aplicação sendo executado via backend, não é necessário importar no executável as dependências.
  externals: [nodeExternals()],

  // Aqui é espeficado o main da aplicação
  entry: {
    bundle: './src/index.js'
  },

  // Aqui é espeficado o output do build
  output: {
    libraryTarget: 'commonjs2',
    path: path.join(__dirname, 'dist'),
    filename: 'taller-postgres.js'
  },

  resolve: {
    // Aqui é especificado um alias para sua aplicação ("Nesse caso é usados nos testes")
    alias: {
      'taller-postgres': path.resolve('./src/index.js')
    },

    // Aqui é especificado onde a aplicação vem resolver os imports
    modulesDirectories: [
      path.resolve('./src'),
      path.resolve('./node_modules')
    ]
  },

  module: {
    loaders: [
      // Aqui é especificado que todos os arquivos .js ou jsx e serem convertidos para javascript puro dentro do executável.
      { test: /.js$/, exclude: /node_modules/, loader: 'babel-loader' }
    ]
  },

  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),

    // Aqui é informado que o aplicativo vem trabalhar com essa variável global
    new webpack.DefinePlugin({
      'process.env': {
        // NODE_ENV auxilia o sistema a entender o ambiente de execução, nesse caso versão de produção.
        NODE_ENV: JSON.stringify('production')
      }
    }),

    // Assim é minificado todas as classes para melhor performance do taller-postgres.js
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

Esses são apenas alguns recursos entre inúmeros que a documentação de Webpack nos traz.

Para saber mais, acesse o link https://webpack.github.io/docs/configuration.html.

Abraços!

Reflexão #1 Uma boa prática é deixar uma classe por arquivo, pois é importante exercitar divisão de responsabilidade para deixar seu código mais modular; classes pequenas auxiliam na produtividade do time.

URL do repositório de exemplo: https://github.com/TallerWebSolutions/taller-postgres

***

Artigo publicado originalmente em http://blog.taller.net.br/desenvolvendo-com-o-auxilio-de-webpack/.

Mensagem do anunciante:

Experimente a Umbler, startup de Cloud Hosting por demanda feita para agências e desenvolvedores e ganhe até R$ 100 em créditos!

Source: IMasters

Categorizados em:

Este artigo foi escrito pormajor

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *