自作ゲームをwebpack 対応させてみた

2015/10/31 プログラミング生放送勉強会 第36回

Takeuchi Yuusuke

自己紹介某SIで社内システム開発してます

最近、Reduxと格闘してます

趣味でall javascriptのゲームを作ってます

twitter @pegass85

github https://github.com/kaidouji85

皆さんは素敵なjavascrit ライフを楽しんでいますか？

僕は自作ゲームのjsモジュールが 増えてきて苦しんでます

何故なら

javascriptのモジュール機能はクソだから

どうクソなのかソースから別ファイルを読めない

必要なファイルをscriptタグで並べるしかない

しかもクラス、関数は全部グローバル

それを解決するために webpackを使いました

webpackとはjavascriptを1つにまとめるもの

ソース自体はcommon.js形式でまとめられる

↑これがwebpackを使う理由の9割と言っても過言ではない

僕はcommon.jsが使えるんだ

こんなに嬉しい事はない

common.jsのモジュール化機能require()で外部ファイルをロードできる

基本変数、関数、クラスはファイルの中に閉じている

関数、クラスを外出ししたい場合は、以下形式で

modules.export = 外出ししたい関数・クラス名

詳細はこちらに

https://webpack.github.io/docs/commonjs.html

自作ゲームwebpack化の流れ

各ソースをcommon.js形式で書き直す

エントリポイントとなるファイルを対象に、webpackでビルドする

完成したファイルをhtmlの中で読み込む

イメージはこんな感じ

ビルドしたファイルですが

人間が読めたものではありません

そうなるとデバッグが大変じゃないですか

↑の誤解があって、中々webpack対応に踏み切れずにいました

大丈夫、source mapがあるよ

source mapとは

ビルドしたソースと、元となってソースの対応関係を付けるものです

ビルド前のコードを表示し、そこにブレークポイントを設定することもできます

source mapはwebpack標準でついてます

.webpack配下にオリジナルソースがあります

webpackを勉強するには公式サイトのチュートリアルが分かりやすいです

http://webpack.github.io/docs/tutorials/getting-started/

自分でも公式サイトのチュートリアルを

写経してみました

https://github.com/kaidouji85/study-webpack

webpack対応したコード

webpack化した自作ゲームです

https://github.com/kaidouji85/gbraver

ゲーム自体はherokuで公開しています

http://gbraver.herokuapp.com

↑ブラウザの開発者コンソールで

source mapが確認できます

webpackを使って快適なjsライフを送りましょう

ご清聴ありがとうございました