DAppsを作るには、まずwebpackを知らなければいけないという事実に直面する

直面した!

ので、webpackからやっていきます…

以下の2点を武器に進めます!

  • 本家Document
  • githubのサンプルコード

本家Document

コレー!

githubのサンプルコード

いいのを見つけた!

そして、実際に動いているのがこれ!

実際に構成とかも勉強できてようぃ。

基本的な構造

ルートディレクトリには以下の通り。

  • database
  • dist
  • src
  • style
  • .babelrc
  • .gitignore
  • Procfile
  • README.md
  • package.json
  • server.js
  • webpack.config.js

見ていきましょう!

database

その名の通り、databaseとのやり取りのコードが格納されています。

配下のディレクトリはqueryseedに分かれているんですが、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-routerRouterとかでやっていそうだ。

ここを読めば普通にできそうだ。

それで、indexの内容だけはhtmlとしてindex.htmlそして、jsはindex.jsが置いてある。

htmlはないんですよね?

electronは触ったことあるけど、なんか同じようにhtmlはないんですよね?

と思ったら、ファイル自体はないけど普通にjs内にベタっとあるんですね…

確か、electronもそんな感じだったわん。

結論

結構わかりやすくて簡単にできそう!

頑張ろう!webpack!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です