Laravel x Vite

Laravel x Vite / Kuro Hsu
@ PHP 也有 Day #60

Transcript

1. Kuro Hsu @ PHP 也有 Day #60
   2021/08/05
   Laravel x Vite
   

   View Slide

2. Kuro Hsu
   Front-End Developer
   Organizers of Vue.js Taiwan
   (Vue.tw)
   https://kuro.tw
   kurotanshi@gmail.com
   @kurotanshi
   

   View Slide

3. Vite 是什麼
   vite
   ⚡ 發音 /vit/ ，是法語中「快速」的意思
   由 Vue.js 的作者 Evan You 所開發
   快速啟動、即時更新的前端 「開發工具」
   不只 親兒子 Vue， React 也能用！
   https://github.com/vitejs/vite
   

   View Slide

4. View Slide

5. 實際對比: 以 React Create App 為例
   Link
   

   View Slide

6. Vite 為什麼這麼快
   

   View Slide

7. Vite 為什麼這麼快
   

   View Slide

8. 以 Bundle 為基礎 (webpack)
   

   View Slide

9. 以 ES Module 為基礎 (vite、snowpack)
   

   View Slide

10. 橫向對比
    

    View Slide

11. 更多相關細節
    [MOPCON 2020] vite: Make web dev fast again
    

    View Slide

12. 今日重點 - Vite ❤️
    Laravel
    

    View Slide

13. 基本需求
    Laravel: PHP 7.4+
    Vite: Node 12+
    開發用 瀏覽器需支援 ES Module
    若需支援舊版瀏覽器 ，須另外安裝 @vitejs/plugin-legacy
    

    View Slide

14. 開始與起步
    首先要有一個 laravel 專案：
    切換到專案目錄，並執行：
    1 $ composer create-project laravel/laravel example-app
    1 $ npx apply laravel:vite
    

    View Slide

15. 手動處理
    或者也可以自行處理：
    1 #
    手動移除 laravel-mix
    
    2 rm webpack.mix.js
    
    3 yarn remove laravel-mix
    1 #
    安裝必要套件，此步驟不可省略！
    
    2 composer require innocenzi/laravel-vite
    
    3 yarn add vite laravel-vite --dev
    

    View Slide

16. 設定
    編輯 vite.config.ts 檔案
    1 // vite.config.ts
    
    2 import { defineConfig } from 'laravel-vite'
    
    3 import vue from '@vitejs/plugin-vue'
    
    4
    5 export default defineConfig()
    
    6 .withPlugin(vue)
    
    7 .merge({
    
    8 // Your own Vite options
    
    9 })
    

    View Slide

17. 設定
    編輯 package.json 檔案
    1 // package.json
    
    2 "scripts": {
    
    3 "dev": "vite",
    
    4 "build": "vite build",
    
    5 "serve": "vite preview"
    
    6 },
    
    
    
    
    3 "dev": "php artisan serve & vite", //
    同時啟動 artisan serve
    與 vite
    
    
    
    
    
    1 // package.json
    2 "scripts": {
    4 "build": "vite build",
    5 "serve": "vite preview"
    6 },
    

    View Slide

18. 這是用來更新靜態檔的 vite 服務
    注意，這才是開發用網頁伺服器
    

    View Slide

19. Hello Vite!
    

    View Slide

20. 更多資訊
    Laravel Vite
    ViteJS
    vite2: Make Web Dev Fast Again & Again
    

    View Slide