Laravel x Vite - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Kuro Hsu Front-End Developer Organizers of Vue.js Taiwan (Vue.tw) https://kuro.tw [email protected] @kurotanshi

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Vite 為什麼這麼快

Slide 7

Slide 7 text

Vite 為什麼這麼快

Slide 8

Slide 8 text

以 Bundle 為基礎 (webpack)

Slide 9

Slide 9 text

以 ES Module 為基礎 (vite、snowpack)

Slide 10

Slide 10 text

橫向對比

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

今日重點 - Vite ❤️ Laravel

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

手動處理或者也可以自行處理： 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

Slide 16

Slide 16 text

設定編輯 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 })

Slide 17

Slide 17 text

設定編輯 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 },

Slide 18

Slide 18 text

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