直面した!
ので、webpackからやっていきます…
以下の2点を武器に進めます!
- 本家Document
- githubのサンプルコード
目次
本家Document
コレー!
githubのサンプルコード
いいのを見つけた!
そして、実際に動いているのがこれ!
実際に構成とかも勉強できてようぃ。
基本的な構造
ルートディレクトリには以下の通り。
- database
- dist
- src
- style
- .babelrc
- .gitignore
- Procfile
- README.md
- package.json
- server.js
- webpack.config.js
見ていきましょう!
database
その名の通り、databaseとのやり取りのコードが格納されています。
配下のディレクトリはquery
とseed
に分かれているんですが、queryは普通にdatabaseに登録したり、削除したりするもの、seedにはその名の通りデータベースの初期値として登録する内容が入っています。
seed走らせるコマンドは何なのか…?
dist
コンパイルされたファイル群
src
src配下には以下の3つのディレクトリがあります。
- actions
基本的にデータベースとのやり取りのメソッドです。
databaseディレクトリ内にある内容を実際に使えるようにするもの。 -
components
ページのビューとなるもの。
routingではここの内容を表示するようになっています。 -
reducers
ちょっとわかりにくいんですが、paginationや検索結果表示の時に使うものでし。
表示するアイテムを調整すると言った感じでしょうか。
style
cssファイル群
この辺はちょっとtruffleのwebpackと異なるような…?
.babelrc
babelのドットファイル。
Babelは、新しいJavaScriptの仕様で書かれたソースコードを現状のブラウザで使用できるように変換してくれるツールです。
.gitignore
説明不要のgitignore
Procfile
herokuのためのファイル。
というかherokuで動いてたのか…にわかherokuユーザーだが、Procfileはちょっと知らない。
README.md
説明不要のREADME
package.json
泣く子も黙るpackage.json
server.js
サーバーに関するconfigファイル的なやつ。
webpack.config.js
まぁ、webpackのconfigファイル(そのまま…)
その他
routing
一番気になっていたところ…
src/router.js
に作ってる。
react-router
のRouter
とかでやっていそうだ。
ここを読めば普通にできそうだ。
それで、indexの内容だけはhtmlとしてindex.html
そして、jsはindex.js
が置いてある。
htmlはないんですよね?
electronは触ったことあるけど、なんか同じようにhtmlはないんですよね?
と思ったら、ファイル自体はないけど普通にjs内にベタっとあるんですね…
確か、electronもそんな感じだったわん。
結論
結構わかりやすくて簡単にできそう!
頑張ろう!webpack!