Laravel Mix とは何なのか？ - Laravel/Vue 勉強会 #1

Laravel Mix とは何なのか？ @Laravel/Vue勉強会#1

• 岡田正平（おかだしょうへい） • 株式会社ウィルゲートに15新卒入社 • 主に PHP (Laravel)
を使った社内システムの開発等 • 最近読んだ本「何となくJavaScriptを書いていた人が一歩先に進むための本」 2 おまえだれ？ @okashoi

• “一人ひとりの『will』を実現する” • コンテンツマーケティング事業／メディア事業 3 ウィルゲートについて

4 ウィルゲートについて

5 ウィルゲートについて

Laravel Mix とは何なのか？

• Laravel Mix とは何なのか 5分 • 使い方 • 準備編 2分
• 実行編 • Laravel Mix × Vue.js （DEMOあり） 3分 7 アジェンダ

Laravel Mix provides a clean, fluent API for defining basic
webpack build steps for your Laravel application. 9 Laravel Mix とは

10 Laravel Mix とは Laravel Mix provides a clean, fluent
API for defining basic webpack build steps for your Laravel application.

• webpack の設定を容易に記述できる • Laravel 向けの • npm パッケージ 11
ようするに？

ようするに？

• JavaScript をモジュール化 • 依存関係解決 • 読み込み用の単一のファイルを生成（ビルド） 13 webpack?

webpack.mix.js 14 設定例（デフォルト）

webpack.mix.js 15 設定例（デフォルト）ビルド済みファイル出力先ビルド元のソースコード

ようするに？

• 確かに Laravel には向いている • どちらかというと Laravel 自体が Laravel に合わせて
デフォルト設定を提供している様に読みとれる • Laravel 以外にも利用可能なのでは？（要検証） 17 Laravel向けの（？）

• 確かに Laravel には向いている • どちらかというと Laravel 自体が Laravel に合わせて
デフォルト設定を提供している様に読みとれる • Laravel 以外にも利用可能なのでは？（要検証） 18 Laravel向けの（？）

• webpack の設定を容易に記述できる • Laravel 向けの（？） • npm パッケージ 19
ようするに？

20 npm パッケージである (package.json)

21 npm パッケージである (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/install 26 1. node / npm (yarn) をインストール

27 2. Laravel 5.4 プロジェクトを作成

28 3. npm (yarn) install を実行

以上。

使い方（実行編）

31 1. 下記コマンドを実行

32 1. 下記コマンドを実行

以上。

Laravel Mix × Vue.js

35 resources/assets/js/app.js

36 resources/assets/js/app.js

resources/assets/js/components 下に .vue 形式で配置 37 カスタムコンポーネント (Example.vue)

Laravel Mix とは • webpack の設定を容易に記述できる • Laravel 向けの（？） •
npm パッケージ Laravel 5.4 プロジェクトを作成した時点で即利用可能！ 39 まとめ

More Decks by Shohei Okada