Como usar o Rockpack

Resumindo, Rockpack é Criar aplicativo React ( CRA ) em esteróides. É uma ferramenta de bootstrap do React que visa fazer o trabalho pesado e simplifica o processo de configuração de aplicativos React.

O Rockpack permite que os desenvolvedores inicializem aplicativos React com suporte para renderização do lado do servidor, agrupamento, linting, teste, registro, localização e muito mais.

A maneira mais fácil de pensar no Rockpack é que ele é CRA com muitas adições úteis, bem pensadas e, muitas vezes, necessárias.

Nesta postagem, aprenderemos sobre o Rockpack, sua arquitetura, módulos e por que ele é necessário.

Módulos Rockpack

Uma das melhores coisas sobre o Rockpack é que ele tem uma arquitetura modular para que você possa usar apenas o módulo Rockpack que desejar.

Nesta seção, examinaremos cada módulo Rockpack em detalhes.

@ rockpack/compiler

Este é um empacotador React baseado em Webpack . Ele é pré-configurado com os carregadores e plug-in necessários e usa as melhores práticas prontas para uso.

Uso:

Para usar este módulo, execute as etapas a seguir.

1. Módulo de instalação:

    #NPM
   npm install @ rockpack/compiler--save-dev
   #FIO
   yarn add @ rockpack/compiler--dev 

2. Crie um arquivo build.js no diretório raiz com o seguinte código:

    const {frontendCompiler}=require ('@ rockpack/compiler'); frontendCompiler (); 

3. Execute o build.js :

    # DESENVOLVIMENTO
   cross-env NODE_ENV=construção do nó de desenvolvimento
   #PRODUÇÃO
   cross-env NODE_ENV=construção do nó de produção 

Quando você executa a compilação de produção, ela cria uma versão reduzida do seu aplicativo com otimização de produção.

O compilador Rockpack vem com vários recursos incríveis. Abaixo estão alguns deles:

• Suporte TypeScript
• Suporte a scripts de build nodejs com nodemon, livereload, mapas de origem
• Otimizações do React
• otimizações de SEO
• Minificações de imagem
• Suporte GraphQL (webpack-graphql-loader)

A lista continua. Você pode obter uma lista completa aqui .

@ rockpack/ussr

Esta importante biblioteca fornece suporte de renderização universal do lado do servidor ( SSR ) para o projeto Rockpack. Diz-se que fornece suporte SSR universal porque funciona com Redux (thunk, sagas), Apollo, Mobx e outras soluções.

Pronto para usar o React oferece suporte a SSR , mas faz isso sem considerar as operações assíncronas. @ rockpack/ussr adiciona suporte para operações assíncronas para React durante SSR .

Ele fornece algumas APIs (ganchos personalizados) que são análogos aos seus homólogos do React. Alguns deles são useUssrState e useUssrEffect . Eles são análogos ao useState e ao gancho useEffect . No entanto, o useUssrState e o useUssrEffect oferecem suporte a operações assíncronas e SSR .

Uso:

Para usar o @ rockpack/ussr , siga as etapas abaixo.

1. Instale os módulos:

    # NPM
   npm install @ rockpack/ussr--save
   npm install @ rockpack/compiler--save-dev # YARN
   yarn add @ rockpack/ussr
   yarn add @ rockpack/compiler--dev 

2. Importe e use ganchos com suporte para SSR como este:

    import React from'react';
   import {useUssrState, useUssrEffect} de'@ rockpack/ussr'; const getUsers=async ()=> { //executa alguma operação assíncrona
   } export const App=()=> { const [usuários, setUsers]=useUssrState ({usuários: []}); useUssrEffect (async ()=> { const allUsers=espera getUsers (); setUsers (allUsers); }); Retorna { //executa algumas operações para renderizar a lista de usuários };
   }; 

3. Configure client.jsx :

    import React from'react';
   importar {hidrato} de'react-dom';
   importe createUssr de'@ rockpack/ussr';
   importar {App} de'./App'; const [Ussr]=createUssr (window.USSR_DATA);
   hidrato(   , document.getElementById ('root')
   ); 

A linha:

 const [Ussr]=createUssr (window.USSR_DATA);

Garante que o useUssrState funcione corretamente, associando o estado executado no servidor ao cliente.

Além disso, build.js e um arquivo server.jsx (que usa um Koa ) são configurados por padrão, uma vez que escolhemos inicialize um aplicativo SSR . Esses arquivos são pré-configurados para funcionarem entre si e não precisam de mais edições.

Você pode obter mais detalhes sobre como usar o módulo @ rockpack/ussr aqui .

@ rockpack/tester

Ele usa Jest e alguns módulos e complementos recomendados. Ele apresenta um conjunto de testes robusto configurado com as melhores práticas. E é totalmente compatível com TypeScript e babel.

Uso:

Para usar este módulo, siga as etapas abaixo.

1. Instalação:

    # NPM
   npm install @ rockpack/tester--save-dev # YARN
   yarn add @ rockpack/tester--dev 

2. Crie o test.js na raiz do projeto e adicione os seguintes códigos:

    const tests=require ('@ rockpack/tester'); testes (); 

3. Execute testes com os seguintes comandos:

    node tests.js #Desenvolvimento
   node tests.js--watch 

@ rockpack/codestyle

Este é o Eslint configurado de acordo com as práticas recomendadas.

Uso:

Para usar este módulo, siga as etapas abaixo.

1. Instalação:

    # NPM
   npm install @ rockpack/codestyle--save-dev # YARN
   yarn add @ rockpack/codestyle--dev 

2. Crie um arquivo eslintrc.js com o seguinte código:

    const {rockConfig}=require ('@ rockpack/codestyle'); module.exports=rockConfig ({ 'no-plusplus':'erro'
   }); 

3. Para substituir todas as configurações, você pode passar um segundo para a função rockConfig () conforme mostrado abaixo:

    module.exports=rockConfig ({}, { plugins: [ 'algum novo plugin' ]
   }); 

Você pode aprender mais sobre este módulo aqui .

@ rockpack/logger

É aqui que as coisas ficam realmente interessantes e que o Rockpack brilha. O módulo @ rockpack/logger é um sistema de registro avançado que registra todas as ações do usuário (botões pressionados, informações do sistema operacional, telas, etc.). Essas ações podem ser analisadas durante uma seção de depuração.

Uso:

Para usar este módulo, siga as etapas abaixo.

1. Instalação:

    # NPM
   npm install @ rockpack/logger--save # YARN
   yarn add @ rockpack/logger 

2. Envolva o componente App.js no componente LoggerContainer conforme visto abaixo:

   ...  dayjs (). format ('AAAA-MM-DD HH: mm: ss')} stdout={showMessage} onError={stackData=> sendToServer (stack)} onPrepareStack={stack=> stack.language=window.navigator.language} >  
   ... 

O snippet de código acima deve ser o valor de retorno de uma função anônima exportada . A configuração completa e o uso do módulo @ rockpack/logger são um pouco exigentes.

@ rockpack/localazer

Este é um módulo localizador avançado que usa gettext . Ele fornece uma maneira fácil de (localizar) adaptar nossos aplicativos a diferentes idiomas e regiões.

Uso

1. Instalação:

    # NPM
   npm install @ rockpack/localaser--save
   npm install @ rockpack/compiler--save-dev # YARN
   yarn add @ rockpack/localaser
   yarn add @ rockpack/compiler--dev 

2. Em seguida, você deve envolver o App.js nos componentes LocalizationObserver conforme mostrado abaixo:

    import {LocalizationObserver} de'@ rockpack/localaser'; Const Root=()=> { Retorna (    )
   } 

A configuração e o uso do módulo @ rockpack/localaser são um pouco exigentes.

Por que Rockpack?

Algumas alternativas notáveis ​​do Rockpack são Next.js e Create React App . No entanto, a Rockpack supera seus concorrentes de várias maneiras.

Primeiro, todos os aplicativos Rockpack oferecem suporte para o seguinte:

• Importação de diferentes formatos de arquivo ( lista de formatos )
• Otimização de imagem, otimização SVG
• Carregando arquivos SVG como componentes React
• CSS/SCSS/menos módulos
• Babel ou TS, suporte TS para módulos CSS/SCSS/less
• PostCSS autoprefixer
• Otimizações de SEO, otimizações de React
• Analisador de pacotes
• suporte GraphQL

A lista completa pode ser encontrada aqui (todos eles são reunidos usando as práticas recomendadas). Ao fornecer tudo isso pronto para uso, a Rockpack visa reduzir o tempo de configuração do aplicativo. Isso independe do tamanho do aplicativo e da habilidade do desenvolvedor.

Outros motivos para usar o Rockpack incluem:

1. É modular e pode ser importado seletivamente para aplicativos legados
2. Ele fornece uma API fácil de usar e muito amigável para iniciantes (com apenas uma linha você pode inicializar um aplicativo com os recursos listados acima)
3. Tem uma arquitetura muito flexível, portanto, você pode usar suas bibliotecas preferidas para gerenciamento de estado
4. Ele fornece ferramentas poderosas para registro e localização

As vantagens do Rockpack são incríveis e excelentes, qualquer desenvolvedor estaria interessado em usar esta biblioteca incrível. Veremos como inicializar aplicativos React usando Rockpack na próxima seção.

Como começar a Rockpack

A maneira mais fácil de começar a usar o Rockpack é usar o @rockpack módulo/starter . Isso faz parte do projeto Rockpack.

Suporta três tipos diferentes de aplicativos:

1. 1. React Client Side Render ( React CSR )-Fornece um código clichê semelhante ao Create React App
   2. React Server Side Render ( React SSR Light Pack )-Isso fornece o seguinte código padrão:
      • Renderização do lado do servidor ( SSR )
      • Ele usa Koa para seu servidor Node.js
      • @loadable/components
   3. React Server Side Render ( React SSR Full Pack )-Isso fornece um código clichê com o seguinte:
      • Tudo o que temos no React SSR Light Pack
      • React-Router
      • Redux
      • Redux-Saga
      • React-Helmet-Async
   4. Biblioteca ou componente React – Isso fornece um Webpack configurado de forma eficiente, necessário para desenvolver uma biblioteca ou componente React com suporte para a construção esm/cjs, bem como o versão minimizada.

Para inicializar qualquer um dos aplicativos, siga as etapas abaixo.

1. Instalação:

    #NPM
   npm install @ rockpack/starter-g
   

2. Crie seu aplicativo:

    rockpack  

3. Responda à pergunta do terminal e Rockpack cuida do resto. Quando tudo estiver pronto, você deverá obter o seguinte:
   
4. Comece seu projeto:

    cd 
   # e corra
   npm start 

Conclusão

Rockpack é uma biblioteca bem pensada. Já estou animado para usá-lo.

Uma das coisas bonitas sobre o Rockpack é que não há uma curva de aprendizado acentuada, pois você ainda consegue escrever o código React. E oferece a flexibilidade de usar sua biblioteca preferida para coisas como gerenciamento de estado.

A postagem Como usar o Rockpack apareceu primeiro em LogRocket Blog .

Source link