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