Laravel/Vue 勉強会 #1 の発表資料です。
https://connpass.com/event/58157/
Laravel Mix とは何なのか?@Laravel/Vue勉強会#1
View Slide
• 岡田 正平(おかだ しょうへい)• 株式会社ウィルゲートに15新卒入社• 主に PHP (Laravel) を使った社内システムの開発等• 最近読んだ本「何となくJavaScriptを書いていた人が一歩先に進むための本」2お ま え だ れ ?@okashoi
• “一人ひとりの『will』を実現する”• コンテンツマーケティング事業/メディア事業3ウィルゲートについて
4ウィルゲートについて
5ウィルゲートについて
Laravel Mix とは何なのか?
• Laravel Mix とは何なのか 5分• 使い方• 準備編 2分• 実行編• Laravel Mix × Vue.js (DEMOあり) 3分7アジェンダ
8
Laravel Mix provides a clean, fluent API for defining basicwebpack build steps for your Laravel application.9Laravel Mix とは
10Laravel Mix とはLaravel Mix provides a clean, fluent API for defining basicwebpack build steps for your Laravel application.
• webpack の設定を容易に記述できる• Laravel 向けの• npm パッケージ11ようするに?
• webpack の設定を容易に記述できる• Laravel 向けの• npm パッケージ12ようするに?
• JavaScript をモジュール化• 依存関係解決• 読み込み用の単一のファイルを生成(ビルド)13webpack?
webpack.mix.js14設定例(デフォルト)
webpack.mix.js15設定例(デフォルト)ビルド済みファイル出力先ビルド元のソースコード
• webpack の設定を容易に記述できる• Laravel 向けの• npm パッケージ16ようするに?
• 確かに Laravel には向いている• どちらかというと Laravel 自体が Laravel に合わせてデフォルト設定を提供している様に読みとれる• Laravel 以外にも利用可能なのでは?(要検証)17Laravel向けの(?)
• 確かに Laravel には向いている• どちらかというと Laravel 自体が Laravel に合わせてデフォルト設定を提供している様に読みとれる• Laravel 以外にも利用可能なのでは?(要検証)18Laravel向けの(?)
• webpack の設定を容易に記述できる• Laravel 向けの(?)• npm パッケージ19ようするに?
20npm パッケージである(package.json)
21npm パッケージである(package.json)
• webpack の設定を容易に記述できる• Laravel 向けの(?)• npm パッケージ22ようするに?
• Laravel 5.3 以前は Laravel Elixir• Gulp ベース23※補足
使い方(準備編)
• npm• node package manager• PHP でいうところの composer に相当• yarn• npm 互換のパッケージマネージャー• facebook 製1. node / npm (yarn) をインストール
https://yarnpkg.com/en/docs/install261. node / npm (yarn) をインストール
272. Laravel 5.4 プロジェクトを作成
283. npm (yarn) install を実行
以上。
使い方(実行編)
311. 下記コマンドを実行
321. 下記コマンドを実行
Laravel Mix × Vue.js
35resources/assets/js/app.js
36resources/assets/js/app.js
resources/assets/js/components 下に .vue 形式で配置37カスタムコンポーネント(Example.vue)
DEMO
Laravel Mix とは• webpack の設定を容易に記述できる• Laravel 向けの(?)• npm パッケージLaravel 5.4 プロジェクトを作成した時点で即利用可能!39まとめ