@cubos/neutrino-preset-web NPM

Preset Neutrino para projetos web da Cubos

O que é

No pacote @cubos/neutrino-preset-web constam todas as configurações necessárias para testar e compilar, em ambiente de desenvolvimento ou produção, projetos feitos usando nossa stack recomendada atual.

Como usar

Instale o neutrino e o @cubos/neutrino-preset-web:

yarn add neutrino @cubos/neutrino-preset-web

Crie um arquivo chamado .neutrinorc.js na raiz do seu projeto com o seguinte conteúdo:

module.exports = {
  use: ["@cubos/neutrino-preset-web"],
  options: {
    port: 5000,
    output: "dist",
  },
};

Adicione os seguintes scripts em seu package.json:

"scripts": {
  "build": "neutrino build",
  "start": "neutrino start",
  "test": "neutrino test"
}

E desenvolva! Os comandos que podem ser usados são os seguintes:
1. yarn start: compila o projeto, serve a página na url http://localhost:5000 e re-compila quando identifica mudança em arquivos (com hot reloading!)
2. yarn test: executa os arquivos de teste, dentro da pasta test
3. yarn build: compila uma vez, com otimizações de performance e tamanho de bundle, para ambiente de produção

Por que usar Neutrino

Neutrino é um projeto liderado pela Mozilla que visa permitir construir apps feitos com Javascript moderno sem precisar configurar o processo de build manualmente (também conhecido como Zero Config :tm:).

Citando sua documentação, o Neutrino "combina o poder do Webpack com a simplicidade de presets". Presets são pacotes instaláveis e facilmente integráveis na configuração de seu projeto feito com Neutrino que, por trás, constroem a configuração de Webpack que será usada para buildá-lo.

Para a Cubos, a possibilidade de consumir a configuração do Webpack como pacote permite:

Que se mantenha consistência entre projetos
Que as configurações evoluam de forma organizada, uniforme e centralizada
Que as configurações sejam facilmente atualizáveis
Que exista uma referência única, eliminando 'copia e cola' e reduzindo a dívida técnica associada a configurações desatualizadas

Configurações utilizadas

Utilizamos três presets padrão do Neutrino: React, Jest e PWA. Usamos também o middleware style-loader configurado para usar SASS com CSS Modules e aplicar prefixos de vendor automaticamente (com o autoprefixer). Por fim, usamos o ts-loader para transpilar Typescript (sem fazer checagem de tipo, pra melhorar o tempo de build) e o fork-ts-checker-webpack-plugin para fazer a checagem de tipos em paralelo.

Observação: pretende-se, num futuro próximo, eliminar o ts-loader em favor do babel-loader já utilizado no preset React, assim que a implementação de Typescript do Babel se estabilizar, pela flexibidade da ferramenta.