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

Laravel x Vite

Kuro Hsu
August 05, 2021

Laravel x Vite

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

Kuro Hsu

August 05, 2021
Tweet

More Decks by Kuro Hsu

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Vite 為什麼這麼快

    View full-size slide

  6. Vite 為什麼這麼快

    View full-size slide

  7. 以 Bundle 為基礎 (webpack)

    View full-size slide

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

    View full-size slide

  9. 橫向對比

    View full-size slide

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

    View full-size slide

  11. 今日重點 - Vite ❤️
    Laravel

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 手動處理
    或者也可以自行處理:
    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 full-size slide

  15. 設定
    編輯 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 full-size slide

  16. 設定
    編輯 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 full-size slide

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

    View full-size slide

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

    View full-size slide