Laravel x Vite

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

Transcript

1. Kuro Hsu @ PHP 也有 Day #60 2021/08/05 Laravel x Vite
2. Kuro Hsu Front-End Developer Organizers of Vue.js Taiwan (Vue.tw) https://kuro.tw kurotanshi@gmail.com @kurotanshi
3. Vite 是什麼 vite ⚡ 發音 /vit/ ，是法語中「快速」的意思 由 Vue.js 的作者 Evan You 所開發 快速啟動、即時更新的前端 「開發工具」 不只 親兒子 Vue， React 也能用！ https://github.com/vitejs/vite
5. 實際對比: 以 React Create App 為例 Link
6. Vite 為什麼這麼快
7. Vite 為什麼這麼快
8. 以 Bundle 為基礎 (webpack)
9. 以 ES Module 為基礎 (vite、snowpack)
10. 橫向對比
11. 更多相關細節 [MOPCON 2020] vite: Make web dev fast again
12. 今日重點 - Vite ❤️ Laravel
13. 基本需求 Laravel: PHP 7.4+ Vite: Node 12+ 開發用 瀏覽器需支援 ES Module 若需支援舊版瀏覽器 ，須另外安裝 @vitejs/plugin-legacy
14. 開始與起步 首先要有一個 laravel 專案： 切換到專案目錄，並執行： 1 $ composer create-project laravel/laravel example-app 1 $ npx apply laravel:vite
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
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 })
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 },
18. 這是用來更新靜態檔的 vite 服務 注意，這才是開發用網頁伺服器
19. Hello Vite!
20. 更多資訊 Laravel Vite ViteJS vite2: Make Web Dev Fast Again & Again