自作ゲームをwebpack対応させてみた
Post on 09-Jan-2017
1.044 Views
Preview:
TRANSCRIPT
自作ゲームを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ライフを送りましょう
ご清聴ありがとうございました
top related