Continuando nossa saga pela template reactJS perfeita, vamos configurar mais um item, que dessa vez, é essencial para possíveis modificações em nosso projeto e que, ultimamente, muitos desenvolvedores tem adotado sua utilização, tanto em projetos pequenos como grandes. Pronto para mais uma aventura?
O que queremos resolver?
Conhecendo o EJECT
Antes de entender como configuramos o react-app-rewired precisamos entender o que ele busca resolver e assim, chegamos no tão famoso eject.
O create-react-app é um pacote licenciado pelo npm (Node Package Manager) que configura e abstrai todas as dependências que precisamos para ter um projeto react completo em mãos. Para isso, ele configura varias coisas por debaixo dos panos, como:
- Jest: Utilizado para testes unitários em aplicações react.
- Babel: Utilizado para compilar e converter códigos javascript/typescript para versões anteriores.
- Webpack: Responsável por gerar um bundle de todos os arquivos de sua aplicação.
Todas essas configurações são implícitas e abstraídas dentro do projeto create-react-app. O verdadeiro problema que surge, é que muitos desenvolvedores precisam alterar configurações dentro do projeto, como, mudar uma variável do jest, alterar um caminho do babel, dentre outras coisas.
Sabendo disso, o create-react-app possui uma configuração chamada eject e nela, podemos remover as configurações abstraídas e enxergar os arquivos de configuração do webpack, babel e jest.
E porque não EJETAR?
Apesar de o create-react-app permitir a opção de ejetar, muitos desenvolvedores não curtem essa funcionalidade pois além de sujar o projeto com muitos arquivos, quebraria a abstração que o create-react-app proporciona. E é assim que surge o react-app-rewired, ele nos permite sobrescrever essas configurações, de forma que ela se torne acessível sem quebrar a estrutura abstraida.
Essa teoria é um puco complexa, então deixe embaixo sua dúvida :D
Configurando o react-app-rewired
Instalando o pacote
Primeiramente, vamos instalar o pacote com o comando abaixo.
yarn add react-app-rewired -D
Configurando os scripts
O funcionamento do react-app-rewired é bem simples. Para faze-lo funcionar em nosso projeto, basta acessarmos o nosso package.json e alterar os scripts (com exceção do EJECT), substituindo react-scripts por react-app-rewired, como mostrado abaixo:
//package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
Configurando arquivo de overrides
Para concluir, precisamos de nosso arquivo de configuração. Assim como Eslint, Jest, Typescript, dentre outros pacotes, o react-app-rewired precisa de um arquivo de configuração para que funcione corretamente. Ele deve se chamar config-overrides.js e deve exportar as configurações no qual ele vai sobrescrever. Veja abaixo o exemplo:
// config-overrides.js
module.exports = {
webpack: function (config, env) {
return config;
},
jest: function (config) {
return config;
},
devServer: function (configFunction) {
return function (proxy, allowedHost) {
return config;
};
},
paths: function (paths, env) {
return paths;
},
}
Dentro deste arquivo, podemos sobrescrever as configurações de vários módulos do webpack e pacotes integrados como o jest.
Estrutura final
Veja como está nossa estrutura final da template:
Aqui você pode realizar um curso do egghead de forma a realizar as mudanças de configuração conforme seu propósito.
É isso, obrigado mais uma vez pela leitura e mandem sugestões de outros itens que podem ser integrados a nossa template. :D
Top comments (0)