Symfony4のフロントエンド環境構築
ここを起点にしてドキュメントを追っかければ、ほぼほぼ大丈夫だと思う。
Managing CSS and JavaScript
まずは、Encoreをインストールする。
Encore Installation (Symfony Docs)
単純にJS・CSSを使うなら public/
に置いて読み込めばいいのだけど、Symfonyでイマドキのフロントエンド環境を構築したい場合はEncoreを使って準備していくと早い。
あと、パッケージマネージャはYarnを使っていることを前提にしてドキュメントが書かれているので、インストールしておくと良さそう。
$ composer require encore asset $ yarn install
encoreだけじゃなくて、assetコンポーネントも入れておく。
入れておかないとテンプレートで asset()
が使えない。
次は最低限のJSとCSSを用意してビルド・読み込みまでやっていく。
First Example (Symfony Docs)
まずは webpack.config.js
の修正。
以下の箇所のコメントを外してエントリーポイントを指定する。
// .addEntry('js/app', './assets/js/app.js') // .addStyleEntry('css/app', './assets/css/app.scss') .addEntry('js/app', './assets/js/app.js') .addStyleEntry('css/app', './assets/css/app.css')
CSSファイルの拡張子を変えているのは意図的で、Sassを使うつもりがないから。
assets/
に js/app.js
と css/app.css
を作成する。
ここまでできたら yarn run
でビルド。
$ yarn run encore dev
圧縮したりソースマップをつけたくないなら以下のようにproductionを指定する。
$ yarn run encore production
すると public/build/
にビルドされたJSとCSSが生成されるので、それを読み込めば完了。
<head> <!-- ... --> <link rel="stylesheet" href="{{ asset('build/css/app.css') }}"> </head> <body> <!-- ... --> <script src="{{ asset('build/js/app.js') }}"></script> </body>
てな感じで、これで最低限。
本当に最低限すぎて、これだとEncore(Webpack)使わなくていいレベル。
これにPostCSSとかBabelとか入れていく。
記事が長くなるので別で書く。