Vite+ เปิดตัวเวอร์ชันเบต้า

 (voidzero.dev)
1 คะแนน โดย GN⁺ 3 시간 전 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เพื่อลดภาระในการประกอบเครื่องมือพัฒนาเว็บแยกกันในแต่ละโปรเจกต์ Vite+ ได้รวม runtime, package manager, เครื่องมือ build·test·check ไว้ภายใต้จุดเข้าใช้งานเดียว
  • vp dev, vp check, vp test, vp build, vp pack, vp run เชื่อมกับ Vite 8, Vitest, Rolldown, tsdown, Oxlint, Oxfmt เพื่อให้มีระบบคำสั่งที่สอดคล้องกัน
  • หลังจาก alpha ผ่านการออก มากกว่า 12 เวอร์ชัน และ มากกว่า 500 PR มีการปรับปรุง caching, migration, template สำหรับองค์กร, การรองรับเครือข่ายองค์กร และความเสถียรข้ามแพลตฟอร์ม
  • ใน repository สาธารณะมี มากกว่า 1,300 แห่ง ที่พึ่งพา vite-plus และโปรเจกต์อย่าง Dify, critical, BlockNote, vinext, îles, Inkline, npmx ก็ใช้งานอยู่แล้ว
  • เนื่องจากยังอยู่ก่อน 1.0 จึงยังมีงานที่เหลืออยู่ เช่น remote caching, การรองรับ GitLab CI/CD, ความเข้ากันได้กับ framework·plugin, migration, ช่องทางเผยแพร่ และการปรับปรุง diagnostics

Toolchain แบบรวมที่ Vite+ มอบให้

  • Vite+ เปิดตัวเบต้าในฐานะ toolchain แบบรวม สำหรับการพัฒนาเว็บ
  • จัดการ runtime และ package manager จากจุดเข้าใช้งานเดียว และมอบเครื่องมือ frontend หลายตัวรวมกันเป็น stack ที่ผ่านการทดสอบแล้ว
  • เป็นโอเพนซอร์สเต็มรูปแบบภายใต้ MIT license และไม่ผูกกับ framework ใด framework หนึ่ง
  • ใช้ได้กับโปรเจกต์เว็บหลากหลายประเภท เช่น CLI, library, web app
  • โปรเจกต์ใหม่เริ่มด้วย vp create ส่วนโปรเจกต์เดิมเริ่มด้วย vp migrate

รัน dev·check·build ด้วยคำสั่งเดียวกัน

  • Vite+ ถูกออกแบบให้ใช้ระบบคำสั่งเดียวกัน แทนที่จะต้องเรียนรู้ชุดเครื่องมือและคำสั่งที่ต่างกันในแต่ละ repository
  • คำสั่งหลักมีดังนี้
    • vp dev: เริ่ม development server ที่มี hot module replacement บนฐาน Vite 8
    • vp check: รันการ format ด้วย Oxfmt, lint ด้วย Oxlint และ type checking พร้อมกันในครั้งเดียว
    • vp test: รัน unit test บนฐาน Vitest
    • vp build: ทำ production build บนฐาน Vite 8
    • vp pack: bundle library บนฐาน tsdown พร้อมแนวทางปฏิบัติที่ดี
    • vp run: รัน npm script หรือ task ด้วย task runner ในตัวที่รับรู้ monorepo และใช้ intelligent caching
  • ยิ่งทีมและ codebase โตขึ้น ประโยชน์ต่อไปนี้จะยิ่งมากขึ้น
    • เวอร์ชันของเครื่องมือถูกจัดให้ตรงกัน
    • แชร์การตั้งค่าได้ง่ายขึ้น
    • ลดขั้นตอนการตั้งค่าสำหรับผู้ร่วมพัฒนารายใหม่
    • CI รันคำสั่งเดียวกับการพัฒนาในเครื่อง
  • เหมาะสำหรับนักพัฒนาที่ไม่อยากประกอบ toolchain ซ้ำ ๆ เอง และทีมที่ต้องการ การตั้งค่าที่สอดคล้องกัน ทั่วทั้งโปรเจกต์
  • Vite+ ไม่ได้มาแทนที่ ecosystem ของ Vite
    • Vite plugin ยังคงเป็น Vite plugin ต่อไป
    • ภายในโปรเจกต์ยังใช้ package manager ที่ต้องการได้ต่อไป
    • Vite+ มอบชั้นการรวมระบบเพื่อให้องค์ประกอบเหล่านี้ทำงานเหมือนเป็น toolchain เดียวกัน

การเปลี่ยนแปลงจาก alpha ถึง beta

  • หลังจาก Vite+ alpha มีการทดสอบกับโปรเจกต์จริง ออก มากกว่า 12 เวอร์ชัน และ merge มากกว่า 500 PR
  • การปรับปรุงหลักมีดังนี้
    • Caching ที่ฉลาดขึ้น: vp run ผสาน automatic data tracking กับ metadata ที่ Vite รายงาน ทำให้ build cache ทำงานได้ถูกต้องโดยไม่ต้องระบุ input, output, environment variable เอง
    • ปรับปรุง migration: vp migrate จัดการการตั้งค่าแอปที่หลากหลาย และยังมี migration prompt สำหรับ agent ด้วย
    • ฟีเจอร์ระดับ enterprise: ใช้ template สำหรับองค์กร เพื่อทำให้การตั้งค่าระหว่างทีมเป็นมาตรฐาน และใช้ HTTP ที่รับรู้ proxy และ custom CA เพื่อรัน vp ได้แม้อยู่หลัง proxy และ firewall ขององค์กร
    • ข้ามแพลตฟอร์ม: vp ถูกเสริมให้ทำงานได้ดีขึ้นบนระบบปฏิบัติการและ shell หลัก ๆ
    • ขัดเกลาและปรับปรุง: มีการนำการแก้ไขและปรับปรุงมากกว่า 180 รายการเข้าสู่ vite-plus
  • ดูรายละเอียดการเปลี่ยนแปลงเพิ่มเติมได้ที่ ประวัติ release ของ Vite+

เครื่องมือพื้นฐานที่พัฒนาไปพร้อมกัน

  • ระหว่างที่ Vite+ ถูกสร้างขึ้น เครื่องมือพื้นฐานต่าง ๆ ก็ได้รับการปรับปรุงต่อเนื่องเช่นกัน
  • การเปลี่ยนแปลงหลักหลัง alpha มีดังนี้

กรณีการนำไปใช้จริง

  • มี repository สาธารณะ มากกว่า 1,300 แห่ง ที่พึ่งพา vite-plus โดยยังไม่รวมโปรเจกต์ส่วนตัวและการติดตั้ง CLI แบบ global
  • Vite+ ถูกใช้ในโปรเจกต์หลายประเภท
    • Dify: แพลตฟอร์มโอเพนซอร์สสำหรับสร้างแอป LLM
    • critical: เครื่องมือ critical-path CSS ที่ไม่ผูกกับ framework ของ Addy Osmani
    • BlockNote: rich text editor แบบ block-based สไตล์ Notion สำหรับ React
    • vinext: framework แบบ drop-in ที่เข้ากันได้กับ Next.js บนฐาน Vite
    • zerobyte: ระบบ backup automation สำหรับผู้ใช้ self-hosting ที่สร้างด้วย TanStack และ React
    • îles: ตัวสร้างเว็บไซต์แบบ islands ที่ใช้ partial hydration สำหรับ Vue
    • agentsview: เครื่องมือค้นหาและวิเคราะห์ session แบบ local-first สำหรับ coding agent ที่สร้างด้วย Svelte
    • Inkline: library คอมโพเนนต์ UI ที่รองรับ Vue, React, Svelte, Angular, Solid, Qwik, Astro
    • npmx: browser สำหรับ npm registry แบบโอเพนซอร์สบนฐาน Nuxt
  • Daniel Roe จาก npmx ระบุว่า Vite+ ช่วยให้ developer experience รวดเร็ว และทำให้กระบวนการ CI กับ review รวดเร็วด้วย

งานที่เหลือก่อน 1.0

  • Vite+ มีความเสถียร แต่ยังไม่ใช่ขั้นสมบูรณ์ และแนะนำให้นำไปใช้หากตอบโจทย์ฟีเจอร์ที่ต้องการจาก toolchain แบบรวม
  • สิ่งที่จะโฟกัสจนถึง 1.0 มีดังนี้
    • ทำ remote caching สำหรับ Vite Task ซึ่งคือ vp run
    • นำ setup-vp สำหรับ GitLab CI/CD มาใช้
    • ปรับปรุงความเข้ากันได้ทั่วทั้ง Vite framework และ plugin
    • รองรับเป้าหมาย migration เพิ่มขึ้น
    • เพิ่มช่องทางเผยแพร่ เช่น Homebrew formula อย่างเป็นทางการ
    • ปรับปรุงเอกสารและ diagnostics ให้ชัดเจนขึ้น
  • ให้ความสำคัญกับ feedback จากชุมชน เพื่อลดช่องว่างด้านความเข้ากันได้ที่เหลืออยู่ก่อน release 1.0

การติดตั้งและ migration

  • ติดตั้งคำสั่ง vp แบบ global บน macOS/Linux ด้วยคำสั่งต่อไปนี้
curl -fsSL https://vite.plus | bash
  • บน Windows ให้ใช้คำสั่ง PowerShell ต่อไปนี้
irm https://vite.plus/ps1 | iex
  • สร้างโปรเจกต์ใหม่ด้วยคำสั่งต่อไปนี้
vp create
  • หากต้องการลอง Vite+ กับโปรเจกต์ Vite เดิม ให้ใช้คำสั่งต่อไปนี้
vp migrate

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 3 시간 전
ความคิดเห็นจาก Hacker News

  • ผมชอบ Vite มากจริง ๆ แต่ไม่รู้เลยว่าเครื่องมืออื่น ๆ คืออะไร
    พอก้มหน้าก้มตาทำงานอยู่แป๊บเดียว ระบบเครื่องมือฝั่งฟรอนต์เอนด์ก็วิวัฒนาการไปแบบกะทันหัน เลยสงสัยว่าตอนนี้มีกระแสที่อยากไปสู่ สแต็กที่น่าเบื่อแต่ใช้งานได้ดี อยู่หรือเปล่า

    • เครื่องมือที่รวมมาด้วยนั้นจริง ๆ แล้วค่อนข้างยอดเยี่ยม: vitest เป็น test runner ที่เร็วมาก และแม้หลังจากลองใช้หลายเครื่องมืออย่าง jest หรือ test runner ในตัวของ Node แล้ว ก็ยังถูกใจอยู่
      oxlint มาแทน eslint โดยยังเข้ากันได้กับรูปแบบไฟล์ตั้งค่า และเพราะไม่ได้เขียนด้วย JavaScript จึงเร็วมาก ผมเคยลอง biome ด้วย แต่ oxlint มีกฎมากกว่าและเข้ากันได้กับ eslint ดีกว่า
      oxfmt มาแทน prettier และไม่ได้เขียนด้วย JavaScript จึงเร็วกว่า ส่วน rolldown มาแทน rollup โดยยังเข้ากันได้แต่เร็วกว่ามาก ในโปรเจกต์ใหม่ ๆ ก็ใช้เครื่องมือพวกนี้เป็นหลักอยู่แล้ว
    • เครื่องมืออื่น ๆ ใช้สำหรับ testing, bundling, linting และ formatting
      เมื่อก่อนต้องใช้เครื่องมือจากโปรเจกต์โอเพนซอร์สคนละตัวกัน โดยแต่ละตัวมีการตั้งค่าและรอบการอัปเดตต่างกัน แต่ตอนนี้ถูกจัดการเป็น toolchain ง่าย ๆ ชุดเดียว
      Vite+ ก็คือสแต็กแบบ “น่าเบื่อแต่ใช้งานได้ดี” โดยพฤตินัย แถมประสิทธิภาพดีกว่าและต้องตั้งค่าน้อยกว่า
    • ใช่เลย มันไปในทิศทางนั้นพอดี
      eslint → oxlint, prettier → oxfmt คือเขียนใหม่ด้วย Rust เพื่อให้เร็วขึ้น ส่วน webpack → Vite ก็ถูกใช้อย่างแพร่หลายพอแล้ว จึงเป็นกระแสที่ยอมรับกัน
      rolldown → tsdown เพิ่มการรองรับ TypeScript และ jest → vitest ก็เข้ากับ Vite ได้ดี
      เท่ากับนำแนวปฏิบัติที่ลงหลักปักฐานมาตลอด 10 ปีที่ผ่านมา แล้วรวม การรองรับ TypeScript, ประสิทธิภาพจาก Rust และความสามารถในการทำงานร่วมกันไว้ด้วยกัน
    • เคยลองใช้ Vite แต่ไม่รู้สึกว่ามีข้อดีเหนือ esbuild มากนัก เลยห่างไป
      ตอนนี้ก็ใช้ Deno อยู่ด้วย เลยอยากรู้ว่ามันมีประโยชน์ตรงไหน
    • นี่แหละคือ สแต็กที่น่าเบื่อแต่ใช้งานได้ดี รุ่นล่าสุดที่กำลังมาแรงช่วงนี้

  • ผมชอบ Vite, Vitest, Oxlint, Oxfmt และในโปรเจกต์ใหม่ส่วนใหญ่จะดูทางนี้ก่อน
    หวังว่าทีมนี้จะมีเงินทุนเพียงพอให้พัฒนาต่อไปได้อย่างน้อยอีก 10 ปี
    ดีกว่ามากเมื่อเทียบกับการเปิดโปรเจกต์เก่าแล้วเจอ Gulp, Grunt, webpack และเครื่องมือสารพัดแบบปนกันไปหมด เคยย้ายโปรเจกต์หนึ่งแบบนั้นไปสแต็กใหม่แล้วด้วย

    • เท่าที่รู้ VoidZero ถูก Cloudflare ซื้อกิจการไปแล้ว ดังนั้นเงินทุนน่าจะไม่ใช่ปัญหา
      ประเด็นคือ Cloudflare จะปล่อยให้คนกลุ่มนี้สร้าง ฟีเจอร์ของ Vite และ Vite+ ต่อไปหรือไม่ เพราะเป็นฟีเจอร์ที่เป็นประโยชน์ต่อทุกแพลตฟอร์มคลาวด์ ไม่ใช่แค่ Cloudflare
      https://blog.cloudflare.com/voidzero-joins-cloudflare/
    • การทำให้ Vite, ESLint, Prettier, TypeScript, React ทำงานประสานกันอย่างเป็นธรรมชาติอาจยุ่งยากได้
      โดยเฉพาะถ้าเป็น full-stack ที่มี server-side rendering ยิ่งเป็นแบบนั้น แต่ถ้าดูแค่ฟรอนต์เอนด์และตัด TypeScript ออกไป ก็จะค่อนข้างง่าย
      กรณีที่ซับซ้อนกว่านี้ต้องรอดูว่า Vite+ จะช่วยได้ไหม

  • ผมว่าโปรเจกต์นี้ควรหาชื่อที่ดีกว่านี้
    เพราะจริง ๆ แล้วมันไม่ได้เป็น Vite ที่ดีกว่า แต่เป็นชุดเครื่องมืออื่น ๆ เลยค่อนข้างชวนสับสน
    ตอนนั้น Void Zero อาจพยายามหารายได้จากแบรนด์ Vite แต่ตอนนี้ถูก Cloudflare ซื้อไปแล้ว ก็ไม่จำเป็นต้องทำแบบนั้นอีก

    • มันคือ Vite ที่มีหลายอย่างเพิ่มเข้ามา ดังนั้น “plus” ก็อาจมีได้หลายความหมาย

  • ผมใช้ Vite, Vitest, Rolldown, tsdown, Oxlint, Oxfmt แล้วพอใจมาก
    มีแพ็กเกจที่ hard fork ไว้หลายตัว และไม่อยากย้อนกลับไป ทุกอย่างใช้งานได้ดีเฉย ๆ
    ถ้าสับสนเพราะชื่อ แนะนำให้เริ่มดูจาก Oxlint https://oxc.rs/docs/guide/usage/linter กับ Rolldown https://rolldown.rs/
    ตลอด 6 เดือนที่นำมาใช้ แก้ tsconfig แค่นิดเดียว
    ปกติถ้าไม่ใช่ของอย่าง antd6, echart, rendering engine หรือไลบรารี geospatial ก็จะดึงแพ็กเกจใหม่มาให้ Claude จัดระเบียบ ปรับให้เข้ากับระบบ type ที่เข้มงวดและเป็นอันหนึ่งอันเดียวกัน แล้วจูนให้เข้ากับ Vite, tsconfig, oxlint ตามสไตล์ที่ชอบ
    ผลคือไม่ต้องคอยตามปัญหา ไลบรารีบวม หรือ การโจมตี supply chain มากเท่าเดิม และโค้ดอ่านกับแก้ได้ง่ายขึ้น

  • Vite ขึ้น major version ห้าครั้งในช่วง 4 ปีตั้งแต่ 2022~2026: 3 → 4 → 5 → 6 → 7 → 8
    ทุกครั้งมี breaking changes และนักพัฒนาต้อง migrate ซึ่งเยอะเกินไป ทั้งที่ก็ไม่ได้ดีขึ้นแบบก้าวกระโดดเมื่อเทียบกับเวอร์ชัน 3
    ผมไม่อยากนำการเปลี่ยนแปลงที่ไม่จำเป็นระดับนี้และความสับสนต่อเนื่องแบบนี้ไปใส่ในส่วนที่เหลือของ toolchain สำหรับพัฒนา
    ถ้า Vite+ สุดท้ายเป็นแค่การห่อเครื่องมือเดิม ๆ ด้วย command-line interface แบบ abstraction ก็แปลว่าต้องลุยผ่านชั้นอ้อมค้อมเพิ่มขึ้นเพื่อให้ได้พฤติกรรมที่ต้องการ ดังนั้นตอนนี้ยังมองในแง่ดีไม่ได้

    • ผมตาม major migration มาทั้งหมด และมันค่อนข้างราบรื่น
      จำปัญหาใหญ่ ๆ ไม่ได้ และโดยรวมทุกครั้งก็คุ้มค่า
    • ผม migrate เอง แต่ก็ไม่ได้เลวร้าย
      มี breaking changes อยู่บ้าง แต่ค่อนข้างแยกเป็นจุด ๆ และ ความเร็วกับการปรับปรุง ระหว่างเวอร์ชันเหล่านี้ก็ค่อนข้างมาก
    • เราก็ทำ major version migration เหล่านั้นทั้งหมด แต่ไม่มีอะไรพังหรือ churn ใหญ่ ๆ
      อยากรู้ว่าเจอการพังแบบไหน
    • ยากที่จะเห็นด้วยว่ามันไม่ได้ดีขึ้นเท่าไรเมื่อเทียบกับเวอร์ชัน 3
      ฟีเจอร์ที่เพิ่มมาเกี่ยวกับ server-side rendering เป็นการปรับปรุงครั้งใหญ่
    • ผมอัปจาก 4 เป็น 8 ทีเดียว และแค่แก้ config 5 บรรทัดก็พอ
      อยากให้เลิกบ่นเรื่องปัญหาที่ไม่มีอยู่จริงได้แล้ว ถึงขั้นสงสัยด้วยซ้ำว่าใช้เครื่องมือพวกนี้จริงหรือเปล่า

  • การตามให้ทันระบบนิเวศฟรอนต์เอนด์ หรือไม่ก็ JavaScript นั้นยากจริง ๆ
    คิดถึงช่วงที่ทำงานกับ Laravel และอยากให้งานที่ใช้ Laravel ให้ค่าตอบแทนสูงกว่านี้

    • คงไม่อยากทำงานกับ Laravel Livewire และ Alpine.js
      แต่ก็ยังต้องตามต่อไป และผลลัพธ์ก็อาจไม่น่าพอใจเท่าไร
    • จริง ๆ แล้วไม่จำเป็นต้องตามก็ได้
      ของที่เคยใช้มาก่อนก็ยังทำงานได้อยู่
    • เห็นด้วย เราเองก็กำลังค่อย ๆ แทนที่ Laravel monolith ด้วย Python Lambda
      คิดถึงยุค Laravel 6 มากจริง ๆ

  • เป็นแนวทางที่ใช้ได้ผลกับ uv ดังนั้นถ้าเป็นทีมที่มีความสามารถ ก็น่าจะทำแบบเดียวกันใน JavaScript ได้

    • แปลกใจที่ในคอมเมนต์มีพูดถึง uv แค่นี้
      สำหรับผมมันเป็นตัวเปรียบเทียบที่ชัดเจนมาก และรู้สึกว่าเป็นพัฒนาการที่น่ายินดีมากสำหรับระบบนิเวศ JavaScript ด้วย
      uv ทำให้การทำงานกับ Python กลับมาสนุกอีกครั้ง

  • สงสัยว่าใช้กับการ build สำหรับ Node ได้เหมือน Vite หรือว่าใช้ได้เฉพาะเบราว์เซอร์

    • เพราะใช้ Vite ข้อจำกัดก็เหมือนกับ Vite
      แต่ผมใช้ vite-plugin-node กับเซิร์ฟเวอร์ NestJS ได้โดยไม่มีปัญหา
      ดูตัวอย่างได้ที่ https://github.com/leosuncin/nest-vite-example/blob/master/v...
    • การตั้งค่าที่เหมือนคาถาส่วนตัวของผม ซึ่งทำงานได้ดีเมื่อ target เป็น Node อยู่ที่นี่: https://pastebin.com/ynz4B5X0
      โดยพื้นฐานแล้วแค่ทำตัวเหมือนเป็นไลบรารีก็พอ
    • ผมใช้ Vite+ กับ CLI ด้วย
      กรณีนี้ไม่ได้ใช้ Vite เป็น dev server แต่ยังมี lint, formatting, การรันงาน และ caching เหมือนเดิม
    • ทุกครั้งที่มีคนเสนอให้ bundle โค้ด Node ผมมักสงสัยเสมอว่า use case คืออะไร
      ข้อดีคืออะไร? เอาไว้ obfuscate ใน SEA หรือเปล่า?

  • สงสัยว่าอันนี้มี subscription ติดมาด้วยไหม
    พอชื่อมี “+” ต่อท้ายก็เริ่มระแวง และคิดไปเองว่าต้องมี subscription พ่วงมาด้วยแน่ ๆ
    ลองดูแล้วเหมือนจะไม่ใช่อย่างนั้น

    • ผมก็คิดแบบนั้นเป็นอย่างแรกเหมือนกัน
      ตอนนี้ “$name+” ถูกฝังในหัวอย่างแรงว่าหมายถึง “บริการ subscription ของ $name”
    • เขียนไว้ว่า “โอเพนซอร์สเต็มรูปแบบภายใต้ไลเซนส์ MIT”
    • เดิมทีอาจเคยวางแผนไว้อย่างนั้นก็ได้ แต่ดูเหมือนภายหลังจะถูก acqui-hire ไป
    • ชื่อนี้น่ากังวลอยู่เหมือนกัน

  • สงสัยว่าใช้ร่วมกับ Astro ได้ไหม