Laravel x Vite

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
4. None

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