3.7 KiB
title | localeTitle |
---|---|
React with Webpack File Structure | 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/ 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
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