Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Laravel x Vite

9ae4f3862d4cb0771cfd36e43252f755?s=47 Kuro Hsu
August 05, 2021

Laravel x Vite

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

9ae4f3862d4cb0771cfd36e43252f755?s=128

Kuro Hsu

August 05, 2021
Tweet

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