Existem muitas ferramentas disponíveis para preparar o ambiente para o desenvolvimento do React. Por exemplo, nosso
tutorial React usa a ferramenta
create-react-app para criar um projeto de modelo que contém tudo o que você precisa para desenvolver aplicativos React. O autor do artigo, cuja tradução estamos publicando hoje, quer falar sobre como configurar independentemente o ambiente para desenvolver projetos React usando Babel e Webpack. Essas ferramentas também são usadas em projetos criados usando as ferramentas create-react-app, e acreditamos que quem estuda o desenvolvimento do React estará interessado em conhecê-los e com a metodologia para criar projetos do React em um nível mais profundo. Nomeadamente, falaremos sobre como configurar o Webpack para que essa ferramenta use o Babel para compilar o código JSX no código JavaScript e como configurar o servidor usado para desenvolver projetos React.
Webpack
O Webpack é usado para compilar módulos JavaScript. Essa ferramenta costuma ser chamada de "empacotador" (do empacotador) ou "construtor de módulos". Após a
instalação , você pode trabalhar com ele usando
a interface da linha de comandos ou sua
API . Se você não estiver familiarizado com o Webpack, é recomendável que você leia sobre os
princípios básicos de sua operação e veja sua
comparação com outros construtores de módulos. Aqui está o que, em alto nível, é o que o Webpack faz.
Trabalho no WebpackO Webpack pega tudo o que o projeto depende e o converte em recursos estáticos que podem ser transferidos para o cliente. O empacotamento de aplicativos é muito importante, pois a maioria dos navegadores limita a capacidade de baixar recursos simultaneamente. Além disso, permite economizar tráfego enviando ao cliente apenas o que ele precisa. Em particular, o Webpack usa um cache interno, devido ao qual os módulos são baixados para o cliente apenas uma vez, o que, como resultado, leva a um carregamento mais rápido dos sites.
Babel
O Babel é um transpiler, usado principalmente para converter construções adotadas nas versões recentes do padrão ECMAScript em um formato que seja compreensível para os navegadores modernos e não os mais recentes e outros ambientes nos quais o JavaScript possa ser executado. Além disso, o Babel pode converter em código JavaScript e JSX usando
@ babel / preset- react.
BabelGraças a Babel, ao desenvolver aplicativos React, podemos usar JSX. Por exemplo, aqui está o código que usa JSX:
import React from "react"; function App(){ return( <div> <b>Hello world!</b> </div> ) } export default App;
Esse código parece limpo, é claro, é fácil de ler e editar. Olhando para ele, você pode entender imediatamente que ele descreve um componente que retorna um elemento
<div> que contém o texto
Hello world! em negrito. E aqui está um exemplo de código fazendo a mesma coisa em que o JSX não é usado:
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _react = require("react"); var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function App(props) { return _react2.default.createElement( "div", null, _react2.default.createElement( "b", null, "Hello world!" ) ); } exports.default = App;
As vantagens do primeiro exemplo sobre o segundo são óbvias.
Pré-requisitos
Para configurar um projeto de aplicativo React, precisaremos dos seguintes módulos npm.
- react - Reage a biblioteca.
- O react-dom é uma biblioteca que nos ajudará a usar os recursos do React no navegador.
- babel / core - transpilação JSX em JS.
- babel / preset-env - cria código adequado para navegadores mais antigos.
- babel / preset-react - configure o transpiler para funcionar com o código React.
- babel-loader - configure o Webpack para funcionar com o Babel.
- css-loader - configurando o Webpack para trabalhar com CSS.
- webpack - montagem de módulos.
- webpack-cli - trabalhe com o Webpack na linha de comando.
- style-loader - carregando todo o código CSS usado no cabeçalho do arquivo HTML.
- webpack-dev-server - configurando um servidor de desenvolvimento.
Agora crie, na pasta react
react-scratch , um novo projeto usando o npm (
npm init ) e instale alguns dos pacotes acima com o seguinte comando:
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader webpack webpack-cli style-loader webpack-dev-server
O ponto de entrada para o programa será o arquivo
index.js , que está contido na pasta
src localizada no diretório raiz do projeto. A estrutura deste projeto é mostrada abaixo. Alguns arquivos e pastas são criados automaticamente, outros você precisará criar por conta própria.
Estrutura do projetoO projeto final, com o qual trataremos aqui, pode ser encontrado
neste repositório.
A pasta do
component conterá os componentes do projeto (no nosso caso, existe apenas um componente aqui). Na pasta
dist , no arquivo
main.js , o código compilado será localizado e
index.html é, como já mencionado, o principal arquivo HTML do nosso aplicativo.
Configuração do Webpack
O Webpack pode ser configurado de várias maneiras. Em particular, as configurações dessa ferramenta podem assumir a forma de argumentos de linha de comando ou estar presentes no projeto como um arquivo de configuração com o nome
webpack.config.js . Nele, você precisa descrever e exportar o objeto que contém as configurações. Começaremos a configurar este arquivo com uma descrição do objeto que se parece com isso (vamos considerá-lo em partes, e abaixo forneceremos seu código completo):
{ entry: "./src/index.js", mode: "development", output: { filename: "./main.js" }, }
A propriedade
entry define o arquivo principal com o código fonte do projeto. O valor da propriedade
mode indica o tipo de ambiente a ser compilado (no nosso caso, este é o ambiente de
development ) e onde colocar o arquivo compilado.
Trabalho de projeto
Coloque o seguinte código no arquivo
index.html do nosso projeto, localizado na pasta
dist :
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>React From Scratch</title> </head> <body> <div id="root"> </div> </body> <script type="text/javascript" src="main.js"> </script> </html>
Preste atenção na tag de
script presente neste arquivo. Aponta para o arquivo
main.js , que será obtido durante a compilação do projeto. Usaremos o elemento
<div> com o identificador
root para exibir o aplicativo React.
Agora instale os pacotes react e react-dom:
npm install react react-dom
Adicione o seguinte código ao
index.js :
import React, { Component } from "react"; import ReactDOM from "react-dom"; import App from "./component/app.component"; ReactDOM.render(<App />, document.querySelector("#root"));
Este é o código padrão para esses arquivos de aplicativos React. Aqui, conectamos as bibliotecas, conectamos o arquivo do componente e exibimos o aplicativo na
<div> com o identificador
root .
Aqui está o código para o arquivo
app.component.js :
import React, { Component } from "react"; import s from "./app.component.css"; class MyComponent extends Component { render() { return <div className={s.intro}>Hello World</div>; } } export default MyComponent;
Aqui está o código para o arquivo
app.component.css :
.intro { background-color: yellow; }
Configurar Babel
Babel é um transportador com grande potencial. Em particular, ele pode converter MENOS em CSS, JSX em JS, TypeScript em JS. Usaremos apenas duas configurações com ele - react e env (elas também são chamadas de "presets"). O Babel pode ser configurado de diferentes maneiras, em particular, estamos falando sobre ferramentas de linha de comando, sobre um arquivo de configurações especiais, sobre o arquivo
package.json padrão. Estamos satisfeitos com a última opção. Adicione a seguinte seção ao
package.json :
"babel": { "presets": [ "@babel/env", "@babel/react" ] }
Graças a essas configurações, Babel saberá quais predefinições ele precisa usar. Agora configure o Webpack para usar o Babel.
Configurando o Webpack para trabalhar com Babel
Aqui usaremos a biblioteca babel-loader, que permite usar o Babel com o Webpack. De fato, o ponto é que o Babel poderá interceptar e processar arquivos antes de serem processados pelo Webpack.
Arquivos SJS
Aqui estão as regras para trabalhar com arquivos JS (esse código irá para o arquivo
webpack.config.js ), eles representam uma das propriedades do objeto de configurações exportado por este arquivo:
module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader" } }, ] }
Uma matriz de regras é armazenada na propriedade de regras do objeto representado aqui, segundo a qual o arquivo especificado pela expressão regular descrita na propriedade de
test deve ser processado. Nesse caso, a regra será aplicada a todos os arquivos com as extensões
.m e
.js , e não queremos
node_modules arquivos da pasta
node_modules e
bower_components . Além disso, aqui indicamos que queremos usar o babel-loader. Depois disso, nossos arquivos JS serão processados por Babel primeiro e depois empacotados usando o Webpack.
▍ arquivos CSS
Inclua as configurações para processar arquivos CSS na matriz de
rules do objeto do
module :
module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader" } }, { test: /\.css$/, use: [ "style-loader", { loader: "css-loader", options: { modules: true } } ] }, ] }
Nós resolveremos a tarefa de processar arquivos CSS usando o style-loader e o css-loader. A propriedade
use pode aceitar uma matriz de objetos ou seqüências de caracteres. Os carregadores são chamados, começando pelo último, para que nossos arquivos sejam processados primeiro com o css-loader. Configuramos essa ferramenta escrevendo
true na propriedade
modules do objeto
options . Graças a isso, os estilos CSS serão aplicados apenas aos componentes para os quais são importados. O Css-loader permitirá comandos de importação em arquivos CSS, após o qual o style-loader adicionará o que é mostrado na forma de uma marca de
style na seção
<head> da página:
<style> <-- css --> </style>
ResourcesRecursos estáticos
Continuaremos trabalhando no objeto de configurações do
module , descrevendo as regras para o processamento de recursos estáticos:
module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader" } }, { test: /\.css$/, use: [ "style-loader", { loader: "css-loader", options: { modules: true } } ] }, { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] } ] }
Se o sistema encontrar um arquivo com a extensão PNG, SVG, JPG ou GIF, o carregador de arquivos será usado para processar esse arquivo. O processamento desses arquivos é importante para a preparação e otimização adequadas do projeto.
Configurando um Servidor de Desenvolvimento
Agora, no arquivo
webpack.config.js , configure o servidor de desenvolvimento:
devServer: { contentBase: path.join(__dirname, "dist"), compress: true, port: 9000, watchContentBase: true, progress: true },
A propriedade
contentBase devServer configurações
contentBase aponta para a pasta na qual nossos recursos e o arquivo
index.html estão localizados. A propriedade
port permite especificar a porta na qual o servidor escutará. A propriedade
watchContentBase permite monitorar alterações nos arquivos na pasta especificada pela propriedade
contentBase .
Aqui está o código completo do arquivo
webpack.config.js :
const path = require("path"); module.exports = { entry: "./src/index.js", mode: "development", output: { filename: "./main.js" }, devServer: { contentBase: path.join(__dirname, "dist"), compress: true, port: 9000, watchContentBase: true, progress: true }, module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader" } }, { test: /\.css$/, use: [ "style-loader", { loader: "css-loader", options: { modules: true } } ] }, { test: /\.(png|svg|jpg|gif)$/, use: ["file-loader"] } ] } };
Agora adicionaremos ao
package.json , na seção
scripts , o comando para iniciar o servidor de desenvolvimento e o comando para começar a compilar o projeto:
"scripts": { "dev": "webpack-dev-server", "start": "webpack" },
Agora tudo está pronto para iniciar o servidor de desenvolvimento com o seguinte comando:
npm run dev
Se você agora acessar o endereço
http: // localhost: 9000 , poderá ver a página do nosso projeto.
Página do projeto no navegadorPara criar um projeto, use o seguinte comando:
npm run start
Depois disso, você pode abrir o arquivo
index.html em um navegador e ver a mesma coisa que pôde ver iniciando o servidor de desenvolvimento e acessando o endereço
http: // localhost: 9000 .
Sumário
Este artigo fornece uma visão geral da configuração do Webpack e do Babel para uso em projetos React. De fato, configurações muito mais complexas podem ser criadas na base que separamos hoje. Por exemplo, em vez de CSS, você pode usar LESS, em vez de JS comum, escrever no TypeScript. Se necessário, você pode, por exemplo, configurar a minificação de arquivos e muito mais. Certamente, se hoje ocorreu seu primeiro conhecimento do processo de autoajuste de projetos React, você pode pensar que tudo isso é muito difícil e muito mais fácil de usar o modelo pronto. No entanto, depois de descobrir um pouco, você perceberá que um pequeno aumento na complexidade das configurações oferece mais liberdade, permitindo que você personalize seus projetos da maneira que você precisar, sem depender completamente de algumas soluções "padrão" e reduzindo sua dependência de eles.
Caros leitores! Que abordagem você costuma usar ao preparar seu ambiente de trabalho para projetos React?