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