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

アジェンダ

8

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

ようするに？

• webpackの設定を容易に記述できる

• Laravel 向けの

• npmパッケージ

12

ようするに？

• JavaScriptをモジュール化

• 依存関係解決

• 読み込み用の単一のファイルを生成（ビルド）

13

webpack?

webpack.mix.js

14

設定例（デフォルト）

webpack.mix.js

15

設定例（デフォルト）

ビルド済みファイル出力先

ビルド元のソースコード

• webpackの設定を容易に記述できる

• Laravel 向けの

• npmパッケージ

16

ようするに？

• 確かに 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)

DEMO

Laravel Mix とは

• webpackの設定を容易に記述できる

• Laravel 向けの（？）

• npmパッケージ

Laravel 5.4 プロジェクトを作成した時点で即利用可能！

39

まとめ