5.1 KiB
title | localeTitle |
---|---|
React with Webpack File Structure | Реагирование с файловой структурой Webpack |
Теперь пришло время настроить нашу файловую структуру, прежде чем писать какой-либо код.
Во-первых, давайте создадим новый файл с именем .gitignore
:
touch .gitignore
Этот файл будет содержать список всех файлов и папок, которые не будут включены, когда мы продвинем наш проект в GitHub. Существует веб-сайт, который предлагает шаблонный код для файлов .gitignore
, что очень полезно, потому что часто файл .gitignore
может быть довольно длинным и подробным, и мы можем забыть некоторые файлы или папки, которые мы хотим, чтобы Git игнорировал.
Перейдите в https://www.gitignore.io/ и введите Node
в строку поиска, затем нажмите « Generate
. Это создаст файл, который выглядит так:
# 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
Теперь мы можем скопировать и вставить это в наш .gitignore
файл.
Обратите внимание, что файл .gitignore
должен всегда включать node_modules
. Это чрезвычайно важно, потому что мы не хотим включать нашу папку node_modules
с нашими Git- node_modules
, поскольку они занимают много места на диске и могут быть установлены с npm install
, что относится к нашему package.json
.
Большинство файлов и папок, перечисленных в нашем файле .gitignore
еще не существует в нашем проекте, но если они это сделают в будущем, они не будут включены в наши Git-коммиты, что важно и полезно, потому что мы должны быть избирательно о том, что мы совершаем.
Теперь нам нужно создать новую папку, которая будет содержать содержимое нашего кода разработки . Назовем это src
:
mkdir src
Затем нам нужно создать папку, которая будет содержать файлы, которые мы используем для производственных целей. Мы будем называть эту папку dist
:
mkdir dist
Теперь, когда мы установили наши пакеты и создали пустые папки src
и dist
, наше дерево будет выглядеть так (не включая .gitignore
, который является скрытым файлом):
.
├── dist
├── node_modules
├── package.json
├── src
└── webpack.config.js
Теперь мы можем создать новую папку js
которая входит в нашу папку src
. Это будет содержать весь наш код React:
mkdir src/js
Мы можем пойти и создать пустой client.js
в нашем src/js
. Это будет наш основной файл React:
touch src/js/client.js
Нам также необходима index.html
, который не должен идти в нашу src
папку, а в нашу dist
папку, так как он необходим для производства нашего приложения:
touch dist/index.html
Итак, наше дерево выглядит примерно так:
.
├── dist
│ └── index.html
├── node_modules
├── package.json
├── src
│ └── js
│ └── client.js
└── webpack.config.js