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