狠狠撸

自作ゲームを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ライフを送りましょう

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

狠狠撸

自作ケ?ームを奥别产辫补肠办対応させてみた

More Related Content

自作ケ?ームを奥别产辫补肠办対応させてみた