React Native e Haul

Uma linha de comando poderosa para React Native

Se você já desenvolveu, ou desenvolve para React Native, já deve ter passado por algumas dores de cabeça com suas depêndencias de desenvolvimento, a maioria relacionada o Metro Bundler (React Native Packager).

Principalmente relacionado ao famoso watchman, que fica observando seus arquivos, para que, em qualquer mudança, alguma ação seja executada.

Você deve ter achado dicas por aí de:

  • Limpe o cache do Metro Bundler (React Native Packager)

Mas existe sim, um jeito melhor para isso tudo, e é nesse momento, que eu vou falar sobre o Haul.

Não, não é esse Raúl!

Uma nova linha de comando

Haul é uma linha de comando para substituir a que vem padrão no React Native.

Ela foi criada utilizando ferramentas de código aberto, tais como webpack.

Você pode utilizá-la como servidor de desenvolvimento ou empacotar seu projeto para produção.

Alguns destaques do README:

  • Substitui Metro Bundler (React Native Packager) para empacotar seu projeto 📦

É uma lista interessante de funcionalidades, principalmente, pelos 2 e 3 pontos.

Adicionando como depêndencia

Assim como no artigo anterior. Não irei falar sobre os requesitos básicos para instalar React Native na sua máquina. Para isso, eu recomendo você ir na documentação oficial e seguir o Getting Started.

Vamos iniciar um novo projeto:

react-native init UsandoHaul

E em seguida iremos adicionar Haul como depêndencia:

npm install --save-dev haul

Aqui vem um detalhe, se você estiver usando React Native em versões >= 0.43, você precisará seguir as etapas:

  • Alterar o arquivo android/app/build.gradle
project.ext.react = [
entryFile: "index.js"
]
apply from: "../../node_modules/react-native/react.gradle"
  • Altere o array adicionando o seguinte valor:
project.ext.react = [
entryFile: "index.js",
cliPath: "node_modules/haul/bin/cli.js"
]
apply from: "../../node_modules/react-native/react.gradle"

Iniciando com a linha de comando

Agora, vamos iniciar o Haul:

./node_modules/.bin/haul init

Ele irá fazer uma pergunta para você digitar o nome do npm script que você deseja que ele crie, o padrão é haul.

Inicializando o Haul e suas opções

Isso irá adicionar todas as configurações necessárias para o Haul funcionar no seu projeto e também, irá adicionar um arquivo webpack.haul.js na raíz do seu projeto.

Agora, você já pode executar:

npm run haul

E você verá algo como:

Diferentes bundles para desenvolvimento

Para esse exemplo, iremos utilizar:

  • Selecionamos: ios - Serves iOS bundle

Isso irá iniciar o weback e disponibilizar o bundle para o seu aplicativo React Native rodar no simulador do iOS.

Agora, em outra aba, podemos:

react-native run-ios
Colocando tudo junto e misturado

Mais comandos e opções

Você pode dar uma olhada na documentação oficial, que é bem detalhada:

Outras vantagens

Alguns detalhes bacanas que não estão na documentação:

  • Redução no uso de memória e CPU (com o watchman, quando eu uso um MBA, a ventoinha vai para o espaço)

Finalizando

Ao deletar o arquivo .watchmanconfig, ficamos com uma estrutura final parecida com:

.babelrc
.buckconfig
.flowconfig
.gitattributes
.gitignore
App.js
__tests__
android
app.json
index.js
ios
node_modules
package-lock.json
package.json
webpack.haul.js

Com isso, melhoramos o consumo de memória do seu projeto, abrimos porta para todas a vantagens do ecosistema do webpack e também, temos um ganho na experiência do desenvolvimento.

Quer contribuir? Acesse o repositório oficial ou dê um ping no Twitter Callstack Engineers.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store