Ícone do site Taller

Desenvolvendo com o auxílio de Webpack

Luiz Amorim

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 dessas classes conversarem entre elas formando assim o sistema por 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 da 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.

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, pois 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 este recurso, 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 refatoração do código, isso contribui muito no 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 da https://webpack.github.io/docs/configuration.html ou continue acompanhando o Blog da Taller.

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

Sair da versão mobile