Upload
shohei-okada
View
1.229
Download
0
Embed Size (px)
Citation preview
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
まとめ