110 lines
3.6 KiB
Markdown
110 lines
3.6 KiB
Markdown
---
|
|
title: React with Webpack File Structure
|
|
localeTitle: 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/](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
|
|
```
|
|
|
|
* [Ajuda: Mais sobre as pastas `src` e `dist`](http://stackoverflow.com/questions/23730882/what-is-the-role-of-src-and-dist-folders/23731040#23731040)
|
|
|
|
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
|
|
|
|
``` |