0

[WEBPACK / BABEL] Configurando e criando o primeiro projeto ReatJS

#ReactJS
Dário Junior
Dário Junior
(obs.: Esse é meu primeiro post, todo feedback construtivo é válido)

Olá todos e todas, decidi criar esse post para ajudar nós que estamos em busca da nossa primeira oportunidade a entender um pouco melhor a função do babel e do webpack no nosso dia a dia, esse é um ótimo diferencial que podemos ter! salvem para usarem sempre.


O babel é um transpilador javascript, em resumo ele traduz códigos de versões mais novas do nosso querido JS para versões mais antigas para garantir a compatibilidade com os navegadores mais antigos, mais ou menos nesse caminho temos o webpack, ele é resposável por empacotar módulos que usamos para personalizar nossos projetos e basicamente tornar tudo ‘.js’, ‘.css’, ‘.png’ e ‘.jpeg’. Basicamente, a tecnologia evolui diariamente só que esqueceram de avisar o véio ranziza do NodeJS que está nos anos 2000 ainda.

mecanismos como o npx create-react-app e semelhantes são uma mão na roda para qualquer dev, mas atenção, para nós dev que estão em busca da primeira oportunidade é muito importante entender o que está acontecendo por debaixo dos panos, então esse é o objetivo deste post, criar um projeto react do zero.

Então vamos começar:


Passo 1 - Iniciando o projeto ⇒ Na pasta do projeto criaremos o arquivo de configuração package.json com o comando npm init -y.


Passo 2 - Instalar o react e react-dom ⇒ yarn add react react-dom o react-dom é o responsável por manipular o html no js.


Passo 3 - Diretórios ⇒ na raiz do projeto criaremos as pastas srce public.


Passo 4 - HTML ⇒ ./public/html dentro da pasta public crie o arquivo index html, a estrutura padrão html, e no seu body crie uma div com id root, você pode digitar assim div#root, após criaremos a tag script importando o arquivo bundle.js (falaremos dele mais à frente) <script src="../dist/bundle.js"></script>


Passo 5 - Babel ⇒ Neste momento adicionaremos o babel no nosso projeto yarn add @babel/core @babel/cli @babel/preset-env -D, respectivamente, o primeiro contém os arquivos babel, o segundo permite executar linhas de comando e por fim o preset identifica o ambiente para converter o código.


Passo 6 - Criando o arquivo de configuração ⇒ na raiz do projeto vamos criar um arquivo chamado babel.config.js nele vamos informar os presets, no nosso caso só temos um até o momento, o preset-env é o responsável por transpilar o código para versões mais antigas.

module.exports = {
  presets: [
    "@babel/preset-env",
  ],
}

Para executar manualmente o comando de transpilar, usamos o yarn babel src/index.js --OUT-FILE dist/bundle.js essa nomenclatura dist(distribuição) e bundle são padrões de boas práticas do mercado.


Passo 7 - Instalar o preset-react ⇒ instalaremos preset-react para que o babel também entenda que deve converter os arquivos, yarn add @babel/preset-react -D e adicionaremos no arquivo config.

module.exports = {
  presets: [
    "@babel/preset-env",
    "@babel/preset-react",
  ],
}


Passo 8 - Webpack instalação ⇒ No projeto importamos vários arquivos não só .js, o webpack vai padronizar e traduzir todos os arquivos através dos loaders. primeiro instalaremos o webpack yarn add webpack webpack-cli -D, após criaremos o arquivo de configuração na pasta raiz webpack.config.js.


Passo 9 - Configurando o webpack ⇒ Agora iremos configurar todas as informações necessárias para dar autonomia ao webpack.

  • Adicionamos o módulo nativo path: const path = require(‘path’) ele é utilizado para que não tenhamos problemas futuros com relações aos caminhos dos arquivos, haja visto que windows e linux utilizam notações diferentes.
const path = require(‘path’);
  • Configurando o ponto de entrada: o entry é onde definimos o caminho do arquivo principal nosso projeto o ./src/index.jsx a partir daí o webpack monta a árvore de dependências. Utilizamos o método resolve do path onde o primeiro parametro __dirname será o responsável por resgatar o diretório completo, e os próximos parâmetros informam o caminho do arquivo (evitando que utilzemos / ou \\).
module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.jsx'),
};
  • Configurando o ponto de saída: o output definirá o nome do arquivo e o local em que o pacote gerado pelo webpack será salvo.
module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.jsx'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: `bundle.js`,
  },
};
  • Informar quais extensões de arquivos serão lidos:
module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.jsx'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: `bundle.js`,
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};
  • Adicionando arquivos de outras extensões: Por padrão o webpack lê apenas códigos JS, adicionaremos os loaders para auxiliar o webpack a ler outras extensões. Criaremos uma chave module com um objeto de rules que levarão as configurações (cada configuração de loader deve ir em um objeto).

yarn add babel-loader -D A primeira rule será a integrar o babel com web, para isso utilizaremos uma regex simples para identificar arquivos que terminam com a extensão ‘.jsx’, o exclude é responsável por tirar os diretórios em que a verificação não será necessária, e o use é o responsável por informar os loaders que serão usados.

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.jsx'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: `bundle.js`,
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: 'babel-loaders',   
      },
    ],
  },
};

⇒ Adicionando os loaders de css: instalamos os loaders yarn add style-loader css-loader -D e adicionamos como um objeto nas rules:

    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: 'babel-loaders',   
      },
      {
        teste: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
    ],

Ufa, terminamos por aqui.

  • Passo 10 - Criando estrutura padrão react ⇒ Agora que configuramos a aplicação, vamos criar a estrutura padrão.
//.src/index.jsx
import { render } from 'react-dom';
import { App } from './App';

render(<App />, document.getElementById('root');

no babel.config.js: mudaremos o preset-react para um arrat passando o preset e um objeto com: runtime: ‘automatic’

module.exports = {
  presets: [
    "@babel/preset-env",
    ["@babel/preset-react", {
      runtime: 'automatic',
    }],
  ],
}

Com essa configuração adicional não precisamos importar o React para podermos utilizar JSX nos componentes.

Pensa que acabou? vamos melhorar um pouco nossas configurações e automatizar algumas coisas :D

No webpack.config.js

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.jsx'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: `bundle.js`,
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: 'babel-loaders',   
      },
    ],
  },
};

Vamos adicionar a opção que informa que estamos usando o modo de desenvolvimento.

module.exports = {
  mode: 'development'
  entry: path.resolve(__dirname, 'src', 'index.jsx'),
[...]

Primeiramente vamos adicionar uma configuração para identificar se o ambiente é de desenvolvimento ou produção, segundamente vamos instalar os plugins HTML-WEBPACK-PLUGIN (yarn add html-webpack-plugin -D) e WEBPACK-DEV-SERVER (yarn add webpack-dev-server).

O plugin HTML serve para injetar o arquivo bundle no html automaticamente, não precisando mais daquele script de import no index.html, isso pode evitar falhas e esquecimentos caso haja uma mudança futura das configurações

const path = require('path');
const HtmlWebpackPlugin = requite('html-webpack-plugin');
[...]
resolve: {
  [...]
}
plugins: [
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, 'public', 'index.html'),
  }),
],
[...]

O plugin Dev Webserver automatiza as alterações para criar o bundle novamente e rodar localmente.

[...]
mode: 'development',
devServer: {
  static: path.resolve(__dirname, 'public'),
},
[...]

No package.json:

adicione os scripts de executação local e o de build:

"scripts": {
  "dev": "webpack serve"
  "build": "webpack"
}
0
29

Comentários (1)

1
Wellington Silva

Wellington Silva

05/10/2021 06:33

Parabéns Dário, seu artigo está ótimo.

dariojunior.github.io

Brasil