Cordova com React e webpack

Nesse post mostrei como adicionar React dentro e um projeto que pré-existente. Mas essa forma que mostrei foi a mais simples e primitiva possível. 

Mas para usar oustros recursos como require para importar recursos de outos arquivos js precisamos de outra ferramenta com webpack. 

A imagem abaixo ilustra bem como webpack funciona. A partir de um componente principal, podemos fazer importações de componentes em outros arquivos js. Como todos já sabem, javascript puro não permite isso. Por isso precisamos do webpack que vai ler o componente principal, verificar todos os imports e juntar tudo em um único arquivo automaticamente. Não só com javascript mas também com css e outros tipos de arquivo:

Imagem

Como de costume vamos usar como base o projeto criado nesse outro post 

Para quem não sabe, o projeto criado no post citado acima é um projeto node js cordova mobile. E o webpack uma ferramenta que nos ajuda muito no trabalho com projetos node js. Vale lembrar também que o principal objetivo do webpack é juntar todos os nossos recursos Javascript/css e um único arquivo para que a execução fique mais rápida e para que também possamos tratalhar com require.

Por convenção, nomeamos esse arquivo de bundle.js. No arquivo index.html do nosso projeto cordova, vamos chamar o bundle.js

  <script type="text/javascript" src="./bundle.js"></script>

No final das contas, o webpack pega todos os nossos arquivo js que usamos require e junta tudo no bundle.js. Semelhante ao Gulp e outras ferramentas similares. Mas para tratalhar com React a melhor ferramenta é webpack mesmo. Acredite.

A dinâmica de trabalho vai ser essa: Qunado alterarmos algum arquivo em nossa pasta src, o webpack-dev-server automaticamente junta tudo no arquivo bundle.js e recarrega a página no navegador tornando o ambiente de desenvolvimento muito produtivo.

IMPORTANTE: Antes de começar, certifique-se que está com a versão mais recente do node js. Pois se estiver com uma versão antiga, pode ocasionar vários erros durante a instalação de alguns plugins do node.

Primeiro passo é nevegar até a pasta do projeto pelo prompt de comando e instalar essas dependências: 

   npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 webpack webpack-dev-server

Se esvier usando Yarn, o comando é esse:

   yarn add --dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 webpack webpack-dev-server

Agora instalar as dependências do React e React Dom:

 npm install --save react react-dom

Para quem usa yarn

 yarn add react react-dom

Se quiser saber a diferença entre yarn e npm recomendo que leia esse post No final das contas os dois fazem a mesma coisa. Embora o Yarn seja mais eficiente.

Agora vamos para o arquivo package.json e alterar a parte "scripts" para ficar desse jeito:

   "scripts": {
           "dev": "webpack-dev-server --progress --colors --inline --hot",
           "build": "webpack"
       }

Os nomes dev e build podem ser alterados conforme sua preferência. O primeiro script vai iniciar o webpack-dev-server para rodar nosso app no navegador. Os parametros --inline --hot servem para que nosso servidor atualize automaticamente quando houver alteração no arquivo js principal. O arquivo package.json deve ficar assim:

  {
       "name": "com.yourname.poc1",
       "displayName": "poc1",
       "version": "1.0.0",
       "description": "A sample Apache Cordova application that responds to the deviceready event.",
       "main": "index.js",
       "scripts": {
           "dev": "webpack-dev-server --progress --colors --inline --hot",
           "build": "webpack"
       },
       "author": "Apache Cordova Team",
       "license": "Apache-2.0",
       "dependencies": {
           "react": "^16.2.0",
           "react-dom": "^16.2.0"
       },
       "devDependencies": {
           "babel-core": "^6.26.0",
           "babel-loader": "^7.1.2",
           "babel-preset-es2015": "^6.24.1",
           "babel-preset-react": "^6.24.1",
           "babel-preset-stage-2": "^6.24.1",
           "webpack": "^3.10.0",
           "webpack-dev-server": "^2.11.1"
       }
  }
   

Os nomes poc1 aparecem por que gerei esse projeto com nome poc1. Se estiver gerar o app cordova com outro nome não tem problema.

Agora vamos ter que criar um arquivo chamado webpack.config.js na raiz do projeto com esse conteúdo:

   var path = require("path");
   
   var DIST_DIR = path.resolve(__dirname, "www");
   var SRC_DIR = path.resolve(__dirname, "src");
   
   var config = {
       entry: SRC_DIR + "/app/index.js",
       output: {
           path: DIST_DIR,
           filename: './bundle.js'
       },
       devServer:{
           port:8081,
           contentBase:"./www"
       },
       module: {
           loaders: [
               {
                   test: /.js?/,
                   include: SRC_DIR,
                   loader: "babel-loader",
                   query: {
                       presets: ["react", "es2015", "stage-2"]
                   }
               }
           ]
       }
   };
   
   module.exports = config;

Na parte entry indica qual o arquivo js principal por onde nossa aplicação vai começar a executar. É como se fosse o public static void main do Java. 

Todos os arquivos que são incluídos a partir do src/app/index.js serão compilados dentro do www/bundle.js 

Na parte devServer indica que nosso dev-server vai ficar escutando na porta 8081. Se preferir pode escolher outra porta.

E na parte module /loaders indica os presets que vamos usar. Exemplo: es2015 (Ecma script 2015) significa que podemos escrever em ES2015 no arquivo src/app/index.js e o webpack vai traduzir o conteúdo desse arquivo e compilar no www/bundle.js 

Desse forma, não precisamos nos preocupar com navegadores mais antigos que não suportam ES2015.

Finalmente vamos criar nosso arquivo src/app/index.js e dentro do arquvio o conteúdo apenas para teste:

   alert("deu rock!");

Agora vamos iniciar o webpack-dev-server executando o script que batizamos de dev que criamos no começo do post:

   npm run dev

Se estiver tudo ok, deve aparecer algo parecido com isso no console:

Imagem

E quando abrir o endereço http://localhost:8081/ no navegador:

Imagem

Para parar o serviço, basta Teclar CTR+C no prompt. 

Se eu fizer qualquer alteração no arquivo src/app/index.js a página é automaticamente recarregada e o arquivo /www/bundle.js é atualizado automaticamente. 

Se acessar no navegador http://localhost:8081/bundle.js vai ver o código que escrevemos na pasta src compilado.

Dessa forma, podemos escrever em ES2015 no arquivo src que o webpack automaticamente compila nosso código para o bundle.js e não precisamos nos preocupar com compatibilidade nos navegadores mais antigos que não suportam ES2015.

Talvez não tenha percebido. Mas o arquivo bundle.js aparece no navegador pelo endereço http://localhost:8081/bundle.js mas não está na pasta www de nosso projeto. 

Isso por que aida estamos em desenvolvimento e realmente não precisamos desse arquivo na pasta www ainda. Porém, quando for colocar meu projeto em produção preciso gerar esse arquivo.

Para isso, basta parar o webpack-dev e executar o script build que batizamos no começo do post:

   npm run build

Depois que rodar esse script o arquivo bundle.js é gerado para que possamos colocá-lo em produção.

Comentários

 

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente