110 lines
3.7 KiB
Markdown
110 lines
3.7 KiB
Markdown
|
---
|
||
|
title: React with Webpack File Structure
|
||
|
localeTitle: Reaccionar con la estructura de archivos webpack
|
||
|
---
|
||
|
Ahora es el momento de configurar nuestra estructura de archivos antes de escribir cualquier código.
|
||
|
|
||
|
En primer lugar, vamos a crear un nuevo archivo llamado `.gitignore` :
|
||
|
```
|
||
|
touch .gitignore
|
||
|
```
|
||
|
|
||
|
Este archivo contendrá una lista de todos los archivos y carpetas que **no** se incluirán cuando impulsemos nuestro proyecto a GitHub. Hay un sitio web que sirve código `.gitignore` para archivos `.gitignore` , que es muy útil, porque a menudo, un archivo `.gitignore` puede ser bastante largo y detallado, y podemos olvidar algunos archivos o carpetas que queremos que Git ignore.
|
||
|
|
||
|
Vaya a [https://www.gitignore.io/](https://www.gitignore.io/) y escriba `Node` en la barra de búsqueda, luego haga clic en `Generate` . Esto generará un archivo que se ve así:
|
||
|
```
|
||
|
# 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
|
||
|
```
|
||
|
|
||
|
Ahora podemos copiarlo y pegarlo en nuestro archivo `.gitignore` .
|
||
|
|
||
|
Observe que el archivo `.gitignore` siempre debe incluir `node_modules` . Esto es extremadamente importante, porque no queremos incluir nuestra carpeta `node_modules` con nuestros confirmaciones de Git, ya que ocupan mucho espacio en el disco y se pueden instalar con `npm install` , que se refiere a nuestro `package.json` .
|
||
|
|
||
|
La mayoría de los archivos y carpetas enumerados en nuestro archivo `.gitignore` aún no existen en nuestro proyecto, pero si lo hacen en el futuro, no se incluirán en nuestros compromisos Git, lo cual es importante y útil, porque debemos Selectivo sobre lo que cometemos.
|
||
|
|
||
|
Ahora, necesitamos crear una nueva carpeta que contenga el contenido de nuestro código de **desarrollo** . Llamémoslo `src` :
|
||
|
```
|
||
|
mkdir src
|
||
|
```
|
||
|
|
||
|
Luego, debemos crear una carpeta que contenga los archivos que usamos para fines de **producción** . Llamaremos a esta carpeta `dist` :
|
||
|
```
|
||
|
mkdir dist
|
||
|
```
|
||
|
|
||
|
* [Ayuda: Más acerca de las carpetas `src` y `dist`](http://stackoverflow.com/questions/23730882/what-is-the-role-of-src-and-dist-folders/23731040#23731040)
|
||
|
|
||
|
Ahora que hemos instalado nuestros paquetes y creado las carpetas `src` y `dist` vacías, nuestro árbol se verá así (sin incluir `.gitignore` , que es un archivo oculto):
|
||
|
```
|
||
|
.
|
||
|
├── dist
|
||
|
├── node_modules
|
||
|
├── package.json
|
||
|
├── src
|
||
|
└── webpack.config.js
|
||
|
```
|
||
|
|
||
|
Ahora, podemos crear una nueva carpeta `js` que vaya a nuestra carpeta `src` . Esto contendrá todo nuestro código React:
|
||
|
```
|
||
|
mkdir src/js
|
||
|
```
|
||
|
|
||
|
Podemos seguir adelante y crear un `client.js` vacío en nuestro `src/js` . Este será nuestro principal archivo React:
|
||
|
```
|
||
|
touch src/js/client.js
|
||
|
```
|
||
|
|
||
|
También necesitamos un `index.html` que **no debe** ir a nuestra carpeta `src` , sino a nuestra carpeta `dist` , porque se requiere para la **producción** de nuestra aplicación:
|
||
|
```
|
||
|
touch dist/index.html
|
||
|
```
|
||
|
|
||
|
Así que ahora, nuestro árbol se ve algo como esto:
|
||
|
```
|
||
|
.
|
||
|
├── dist
|
||
|
│ └── index.html
|
||
|
├── node_modules
|
||
|
├── package.json
|
||
|
├── src
|
||
|
│ └── js
|
||
|
│ └── client.js
|
||
|
└── webpack.config.js
|
||
|
|
||
|
```
|