直面した！
ので、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！