電脳麻将 のプログラム構成について。
ver.1.0.0 より電脳麻将は、npm対応のパッケージ になっています。ソースからビルドするには Node.js と npm が必要になりました。今回はこの新しいプログラム構成について説明します。
次回リリースする ver.1.4.0 で構成を再度見直す予定なので、今回の説明も先駆けてそれに合わせています。
全体構成
プログラムは以下のファイルとディレクトリで構成されます。
ファイル | 説明 |
---|---|
package.json | npm用構成ファイル |
README.md | パッケージの説明 |
LICENSE | ライセンスファイル |
ChangeLog.md | 変更履歴 |
package-lock.json | モジュール構成ファイル |
webpack.config.js | webpack設定ファイル |
www/ | Webリソース |
src/ | ソースファイル |
test/ | 自動試験用プログラム |
package.json ~ webpack.config.js はnpmでの開発ならばお馴染みのファイルですので説明は省略します。
まず、開発に先立ち
$ npm ci
の実行が必要です*1。これにより node_modules/ が生成され、そこに開発に必要なパッケージがインストールされます。
Webリソース
電脳麻将は HTML5 + CSS3 + JavaScript で動作します。動作に必要なファイルは全てこの www/ に配置されます。
ファイル | 説明 |
---|---|
./ | HTMLを配置 |
css/ | CSSを配置 |
js/ | JavaScriptを配置 |
img/ | 画像を配置 |
audio/ | 音声を配置 |
ver.1.0.0 以降は HTML, CSS, JavaScript は別の形式で記述されたソースファイルを変換して生成し、ここに配置するようになっています(これをビルドと呼ぶ)。ですので初期状態では変換の必要がない img/ と audio/ のみが配置されています。ビルドは以下のコマンドで行います。
開発用にビルド*2
$ npm run build
リリース用にビルド*3
$ npm run release
ソースファイル
src/ には以下が配置されます。*4
ファイル | 説明 |
---|---|
html/ | HTMLのソースファイル(pug形式) |
css/ | CSSのソースファイル(stylus形式) |
js/ | JavaScriptのソースファイル |
それぞれ個別に以下のコマンドでビルドできます。
HTMLのみ(pug形式のソースをHTMLに変換)
$ npm run build:html
CSSのみ(stylus形式のソースをCSSに変換)
$ npm run build:css
JavaScriptのみ(webpack で複数のファイルを1つにバンドル)
$ npm run build:js