3.6 KiB
title | localeTitle |
---|---|
React with Webpack File Structure | Reaja com a estrutura de arquivos do Webpack |
Agora é hora de configurar nossa estrutura de arquivos antes de escrevermos qualquer código.
Em primeiro lugar, vamos criar um novo arquivo chamado .gitignore
:
touch .gitignore
Este arquivo conterá uma lista de todos os arquivos e pastas que não serão incluídos quando enviarmos o nosso projeto para o GitHub. Existe um site que serve código clichê para arquivos .gitignore
, o que é muito útil, porque muitas vezes, um arquivo .gitignore
pode ser bastante longo e detalhado, e podemos esquecer alguns arquivos ou pastas que queremos que o Git ignore.
Vá para https://www.gitignore.io/ e digite Node
na barra de pesquisa e clique em Generate
. Isto irá gerar um arquivo que se parece com isso:
# Created by https://www.gitignore.io/api/node
### Node ###
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules
jspm_packages
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
Agora podemos copiar e colar isso no nosso arquivo .gitignore
.
Observe que o arquivo .gitignore
deve sempre incluir node_modules
. Isso é extremamente importante, porque não queremos incluir nossa pasta node_modules
com nossos commits do Git, pois eles ocupam muito espaço em disco e podem ser instalados com o npm install
, que se refere ao nosso package.json
.
A maioria dos arquivos e pastas listados em nosso arquivo .gitignore
ainda não existe em nosso projeto, mas se eles fizerem no futuro, eles não serão incluídos em nossos commits do Git, o que é importante e útil, porque devemos ser seletiva sobre o que nós cometemos.
Agora, precisamos criar uma nova pasta que contenha o conteúdo do nosso código de desenvolvimento . Vamos chamá-lo de src
:
mkdir src
Então, precisamos criar uma pasta que contenha arquivos que usamos para fins de produção . Vamos chamar esta pasta dist
:
mkdir dist
Agora que instalamos nossos pacotes e criamos pastas src
e dist
vazias, nossa árvore ficará assim (não incluindo .gitignore
, que é um arquivo oculto):
.
├── dist
├── node_modules
├── package.json
├── src
└── webpack.config.js
Agora, podemos fazer uma nova pasta js
que entra na nossa pasta src
. Isto irá conter todo o nosso código React:
mkdir src/js
Podemos ir em frente e criar um client.js
vazio em nosso src/js
. Este será o nosso arquivo principal React:
touch src/js/client.js
Também precisamos de um index.html
que não deve entrar em nossa pasta src
, e sim em nossa pasta dist
, porque ela é necessária para a produção de nosso aplicativo:
touch dist/index.html
Então, agora, nossa árvore parece algo assim:
.
├── dist
│ └── index.html
├── node_modules
├── package.json
├── src
│ └── js
│ └── client.js
└── webpack.config.js