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
|
|
|
|
``` |