發表 Build Output API - Vercel
閱讀時間約 3 分鐘
我們相信 Web 是一個開放給所有人的平台, 因此我們努力讓 Vercel 能夠以不管選擇用甚麼建置都可以存取與使用.
今天我們引入了 Build Output API, 一個檔案系統為基底的規格, 允許任何框架都可以讓 Vercel 建置, 並且取用了 Vercel 的優勢, 也就是 Vercel 的 infrastructure building blocks, 像是 Edge Functions, Edge Middleware, Incremental Static Regeneration(ISR), Image Optimization 等等.
這個全新的規格也帶給 Vercel CLI 強大的能力, 包括:
- vercel build : 本地建置一個專案或是在你自己的 CI 環境
- vercel deploy --prebuilt : 部署建置後的輸出直接給 Vercel, 透過 Vercel 的建置系統傳遞
更新 Vercel CLI 到最新版( npm i -g vercel )來試試看, 然後看看文件.
加強了 Vercel CLI 的能力
我們將全新的指令加入 Vercel CLI, 幫助開發者在本地建置時執行與除錯, 以及部署到 Vercel.
將建置與部署分開
當你為 Web 以前端框架建置時, 基礎架構平台, 像是 Vercel, 需要轉譯框架輸出成一種平台看得懂的格式.
使用 vercel build , 我們整合了絕大部分的建置系統進到我們的開源 CLI, 讓你在本地建置整個專案, 複製 Vercel 建置系統的結果.
將原生功能都建置進你自己的框架
很多框架, 像是 Next.js, 已經能夠透過在框架程式碼的簡單配置選擇, 利用 Vercel 的平台功能, 像是 ISR 和 Edge rendering.
藉由開啟這些能力給所有框架, 透過 Build Output API, 我們給予所有框架作者, 有能力且輕鬆地整合這些原始的基礎架構, 包括:
- Edge Functions
- Serverless Functions
- Server-side Rendering(SSR)
- Static Generation
- Image Optimization
- ...等等
透過讓 .vercel/output 資料夾符合 Build Output API 規格, 就能支援這些全部的功能. 而且當你準備好部署, 如果需要, 你可以使用 vercel deploy --prebuilt 跳過建置步驟, 直接上傳 .vercel/output 資料夾.
我們相信這個步驟很重要, 當開發者有靈感時, 讓他們有能力去創造, 而且不會被基礎架構限制.
支援所有前端框架
我們參與了框架作者們, 幫助他們的專案運用 Build Output API. 做一些驚人的新能力:
- SvelteKit 現在可以用 Vercel Edge Functions 在邊緣執行
- Astro 現在可以用 Vercel Edge Functions 在邊緣執行
- Nuxt 正在處理 ISR 支援
我們對於這些開源創作者感到非常興奮. 為了要繼續在前端框架投資, Vercel 現在贊助了 Svelte, Nuxt, Astro, SilidJS 等等.
0會員
5內容數
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
※ 什麼是Web API
API 就是後端開出來讓前端來用的介面，讓前端與後端可以溝通。
API流程：
終端使用者用任何一種裝置進入瀏覽器。
瀏覽器透過 API 向後端發出請求，請求查詢或修改資料。
後端透過 API 收到前端的請求後，取得資料並回應給前端。
前端渲染畫面，終端使用者
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
※ 補充說明：
※ npm 常用指令：
◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱：用來安裝
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Vite 是由 Vue 開發者 Evan You 所開發出來，用來加快、優化程式碼打包的工具，在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具：Webpack。
在那之前，我們先來聊聊為什麼前端會需要所謂的打包工具呢？
關於Git(一)
版本管理系統是什麼？為什麼要用？
版本管理系統（Version Control System，VCS）是一種追蹤和管理項目代碼、文件和資源變更的工具。
工作流程上可防止每個人因使用自己的開發程式搭配不同且不相容的工具所引起的混亂。版本控制會同步處理版本，並確定變更不會與其他人
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
※ 什麼是Web API
API 就是後端開出來讓前端來用的介面，讓前端與後端可以溝通。
API流程：
終端使用者用任何一種裝置進入瀏覽器。
瀏覽器透過 API 向後端發出請求，請求查詢或修改資料。
後端透過 API 收到前端的請求後，取得資料並回應給前端。
前端渲染畫面，終端使用者
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
※ 補充說明：
※ npm 常用指令：
◦ npm init–y：快速初始化一個新的 Node.js 並建立一個 package.json 文件的命令。
◦ npm info 套件名稱 version：快速查詢指定 npm 套件的最新版本號。
◦ npm install套件名稱：用來安裝
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序，具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Vite 是由 Vue 開發者 Evan You 所開發出來，用來加快、優化程式碼打包的工具，在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具：Webpack。
在那之前，我們先來聊聊為什麼前端會需要所謂的打包工具呢？
關於Git(一)
版本管理系統是什麼？為什麼要用？
版本管理系統（Version Control System，VCS）是一種追蹤和管理項目代碼、文件和資源變更的工具。
工作流程上可防止每個人因使用自己的開發程式搭配不同且不相容的工具所引起的混亂。版本控制會同步處理版本，並確定變更不會與其他人
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
前言
現在的前端需求已經越來越高，要考慮HTML及CSS的切版美觀程度，以及React以及Flutter所提出的元件(Componet、widget)觀念，也就是將元件模組化，使元件可以更動態的被程式運行，而不用靜態的客製化每一個介面。開發一個好的元件可以提升整體的開發速度，讓任何使用元件的開發者