Originalの大久保です。世間ではSPAが流行ってるかと思います。Application)の調査を行ったので、そこでの知識を備忘録的にまとめたいと思います。今回作成したコードはGithubにあげているので、興味あればご参照ください。URL:https://github.com/yoppe/webpack-es2015-base-for-play#やりたいことバックとフロントのGitリポジトリを分けずに作る。リリース時などにバックとフロントを別々にリリースしたりデプロイフローを複雑化させたくない。バックは可能なかぎりフロントの影響を受けないようにする。フロントからのリクエストを処理するためにOriginを許可したりディレクトリ構成意識をさせたりと無駄に考えること増やしたくない。シームレスな開発ができるようにする。Applicationで作るからといってF5駆動開発はしたくない。ページ単位でのJSファイルの分割。ページ遷移時の読み込みを少しでも高速化したい。Best.ビルドツールはWebpackに集約する。gulpとかは使わない。Applicationらしい構成。<開発環境>開発時はフロントのソース変更を監視してリアルタイムに画面更新をしたいので、クライアントからのリクエストに対してWebpackのプロキシサーバーを挟む構成。Frameworkフロントエンドもバックエンドに依存するような作りではないため、Railsなどでも使えると思います。Playの設定Webpackによって生成ファイルのパスをPlayで参照するAssetsのディレクトリに追加する必要があります。そのため、下記一行を.sbtに追加します。"dist"ちなみにroutesファイルをいじる必要はありません。下記のassetsで指定されてるpath('/public')は、パッケージ化された時に参照するパスで、デフォルトではAssetsは最終的にすべて/publicにまとめられます。Applicationなので各ページでバンドルされたjsを読み込ませる必要があります。src="@routes.Assets.versioned("todo.bundle.js")"></script>...共通のjs(vendor.jsなど)も同じようにHTML上で読み込ませます。src="@routes.Assets.versioned("vendor.js")"></script></head>...#フロントエンド言語:ES2015トランスパイラ:Babelビルドツール:WebpackCSSのメタ言語:SCSSその他、開発環境と本番環境で設定ファイルを分けれるようにし、コード上でも環境変数を通して開発環境と本番環境のコードを分けれるようにする。開発環境ではESLintのチェックを行い、本番環境ではコードの圧縮・最適化が行えるようにWebpackの設定自体を分けれるようにしました。それでは以下に各Webpackの設定を説明していきます。開発用のサーバの立ち上げ。npmのキャッシュとdistに生成されたコードを削除。本番環境用の設定ファイルを使い、デプロイ用のコードを生成。読み込むWebpackのファイルを切り替えることで環境を切り分けれるようにしてる。CSSに自動でブラウザ互換用のプレフィックス付与。JSのトランスパイルに必要。JSのトランスパイルに必要。レガシーブラウザでもある程度動くコードにJSを変換できるようにする。ES2015をES5トランスパイルするのに必要。webpackの設定ファイル(.babel.js)をES2015で記述できるようにする。(これを使わない場合、Node.JSでの記述が必要になる。WebpackでCSSの読み込み設定を記述できるようにする。ES2015のコーディング規約の静的チェックツール。コーディング規約のテンプレート。WebpackでESLintを実行できるようにする。コーディング規約のテンプレート。コーディング規約のテンプレート。Webpackで画像などのファイルを読み込めるようにする。SCSSのコンパイルに必要。WebpackでCSSオートプレフィックスの設定を記述できるようにする。nodeでファイル/ディレクトリを削除できるようにする。SCSSのコンパイルに必要。CSSの依存関係(import)解決に必要。ライセンス情報を保持した状態でJSを圧縮できるようにする。Webpackで画像などのファイルを読み込めるようにする。Webpackのファイル監視/プロキシサーバーを立ち上げるのに必要。複数のwebpackのファイルをマージできるようにする。一部あいまいな箇所がありますが、ざっくりこんな感じだったと思います。(何か訂正などあればご指摘ください。entryJSの入力に関する設定を記述。vendorは各JS上で読み込む全ページ共通のライブラリを指定し、その他はページ単位で指定。todoの場合、todoページで必要なJSのみ読み込みバンドルする。全ページで読み込みたくはないが複数ページで読み込みたいモジュールがある場合は、別途CommonsChunkPluginの設定をいじる必要あり。outputJSの出力に関する設定を記述。publicPathは埋め込む画像などの参照に必要な(URLに組み込まれる)パスとして指定される。WebpackDevServerの起動時もAssetsの配信サーバーのURLとして機能する。バックもフロントもこのURL(publicPath)からJSなどを配信するため、バックエンドに合わせて指定する必要がある。["es2015"]}ES2015をbabelでトランスパイルして、ES5に変換する。ライブラリはトランスパイルする必要ないのでexcludeで指定。ES2015の指定に関しては.babelrcファイルで行う。このファイル名にしてれば勝手に読み込んでくれる。(babel-loaderのパラメータ指定での設定では動かないことがあった。...SCSSをコンパイルして、CSSに変換する。...JSやCSS上で扱っている画像ファイルのURLを自動解決し、10Kバイト以下の画像ファイルはBase64で出力。Base64にしてるのは画像のHTTPリクエスト数を減らすことで表示を高速化できるため。...対応するレガシーブラウザを設定。browsersで設定れたブラウザに対応できるようにプレフィックスを自動付与。]の設定では、日本で利用者が0.1%以上いるブラウザを対象に、CSSプレフィックスを付与するように指定してる。...3000番のフロント開発サーバーを立ち上げ、contentBaseのパス上にないファイルのリクエストに関しては、プロキシによって9000番に飛ばす。...JSやSCSS上で他のモジュールをimportする際のルートパスの定義。...比較的軽量で一般的に使われてるらしいinline-source-mapを採用。Application用の設定。HTMLでロードされる各JSごと(ページ、entryごと)で使用されてるライブラリを依存性を解決した上で共通化してくれる。これがあることで、各JSのファイルサイズを小さくできる。最初は巨大なライブラリJSを読み込む必要があるので初回ロード時だけ遅くなる。30KB1のようなサイズのファイルが2のようになる。...JSに圧縮をする際にモジュールの利用頻度を考慮して並び替える。これにより、よく利用されるモジュールほど短い名前に変換される。圧縮後に使用される変数名の多くが短くなるため、ファイルサイズをより小さくできる。...スペースや改行、コメントを削除して出力されるJSを最小化。outputの設定は、minify時のコメント削除でLicense情報まで消してしまわないようにするためのもの。これにはuglify-save-licenseが必要。...バンドル時に依存関係木を作り重複しているモジュールを探索、削除することでファイルサイズを減らす。削除モジュールの参照元には関数のコピーを適応することで、意味的な整合性を保ってる。...ファイルを細かく分析し、まとめられるところはできるだけまとめてコードを圧縮する。...eslint.json/*eslint-config-standardをベースとしたESLintの設定。lodashの_、jQueryの$のような無視してほしいグローバルオブジェクトはglobalsで指定。※グローバルオブジェクトは作らないのが望ましい。}}ES2015のJSに対してESLintの静的機解析チェックを適応する。(IDEなどのサポートが受けれる場合は不要と思われる。)ES2015のトランスパイル前に実施され、チェック内容をコンソール出力。eslintではLintの適応ルールを記述した.eslintrcファイルのパス指定。...developmentをproductionにするなどしてグローバルで呼び出せる環境ごとの変数を設定する。JS上ではprocess.env.NODE_ENVによってこの変数にアクセスできるため、if文などで開発環境と本番環境で異なるコードをデプロイすることができる。run#まとめこれらの設定によって、開発時はプロキシサーバーを使ったリアルタイムなブラウザ反映を実現した開発が可能になり、本番環境ではPlayのサーバー単体で駆動するようなシステムを実現できるかと思います。(試験的に作ったものなのでどこか不備があるかも)以上が設定になります。上記設定のプロジェクトはGithubに上げているので興味ある方は参照ください。URL:https://github.com/yoppe/webpack-es2015-base-for-play#感想さくっと作るつもりがだいぶ大きくなってしまった。最近のフロントエンドは開発環境を整備するだけでも覚えること、調べることが多すぎてつらいですね。これにさらにテスト環境のことも考えたらなかなか一から開発環境を整備することのハードルの高さを感じます。それでも一昔前よりはかなりツールがそろってきて、ES2015をはじめとするよりきれいなコードの記述ができるようになっていて、日々進化を実感します。ReplacementはCSSの修正などが画面リロードもなしに反映されるので感動します。次は一度挫折したRollupも試したい。angular-cliを採用することになったので、近々そこらへんの記事もまとめて上げれたらと思います。誤りや改善点などあれば、修正するのでコメント&編集リクエストいただければと思います。playプロジェクトからフロントエンドのプロジェクトを分離するBabelでES6で書いて、webpackでビルドして、mochaでテスト書いて、power-assertでassertの出力を見やすくして、karmaで複数ブラウザのテストを自動化して、カバレッジを出力するようにしたほかにもいっっっぱいあるけど覚えてない。実装...お疲れさまです。中途2年目の堀越です。アクセスキーを安全にあけましておめでとうございます。aws-v...2017-08-28Gruntをnpm-scriptsに置き換えたらバージョンアップが捗ったこんにちは、オリジナル新作マンガの配信サービス、GANMA!のチ...2016-01-04React.jsに触れてみたあけましておめでとうございます。今回React.jsを触...セプテーニ・オリジナルでは一緒に働く仲間を募集中です!ぜひ一度採用サイトを御覧ください。札幌支店に行ってきました。»セプテーニ・オリジナルはScalaMatsuri2020の将軍スポンサーです。ScriptPYXISインフラチームの軌跡プログラミング初心者が3ヶ月半の研修を終えて新卒研修を終えての振り返り月別アーカイブ検索はてなブログをはじめよう!septeni-originalさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。