發表 Build Output API - Vercel

更新 發佈閱讀 4 分鐘

Announcing the Build Output API – Vercel

我們相信 Web 是一個開放給所有人的平台, 因此我們努力讓 Vercel 能夠以不管選擇用甚麼建置都可以存取與使用.

今天我們引入了 Build Output API, 一個檔案系統為基底的規格, 允許任何框架都可以讓 Vercel 建置, 並且取用了 Vercel 的優勢, 也就是 Vercel 的 infrastructure building blocks, 像是 Edge Functions, Edge Middleware, Incremental Static Regeneration(ISR), Image Optimization 等等.

raw-image

這個全新的規格也帶給 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 等等.

留言
avatar-img
Chaol Liu的沙龍
0會員
5內容數
Chaol Liu的沙龍的其他內容
2022/08/15
TransformStream is now supported cross-browser (web.dev) 現在串流轉換在 Chrome, Safari 和 Firefox 都已支援, 他們終於準備好迎接黃金時代!
Thumbnail
2022/08/15
TransformStream is now supported cross-browser (web.dev) 現在串流轉換在 Chrome, Safari 和 Firefox 都已支援, 他們終於準備好迎接黃金時代!
Thumbnail
2022/08/15
Typescript: It's not actually validating your types. - DEV Community 👩‍💻👨‍💻 有時他會讓你誤解: 我遇到一個相信 typescript 保證型別就是你說的那樣. 但我必須告訴你: Typescript 不是這樣做的.
Thumbnail
2022/08/15
Typescript: It's not actually validating your types. - DEV Community 👩‍💻👨‍💻 有時他會讓你誤解: 我遇到一個相信 typescript 保證型別就是你說的那樣. 但我必須告訴你: Typescript 不是這樣做的.
Thumbnail
2022/08/12
當你買一輛車或腳踏車, 你第一件事會先調整座位的位置和手把的高度到適合你的身體大小. 這就跟 git 配置是一樣的. 在這篇文章, 我會分享一些 git 的設定, 而且是我一直都在使用的.
Thumbnail
2022/08/12
當你買一輛車或腳踏車, 你第一件事會先調整座位的位置和手把的高度到適合你的身體大小. 這就跟 git 配置是一樣的. 在這篇文章, 我會分享一些 git 的設定, 而且是我一直都在使用的.
Thumbnail
看更多
你可能也想看
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
當你做好你的網站後,教大家把你的網站部署到雲端伺服器Vercel
Thumbnail
當你做好你的網站後,教大家把你的網站部署到雲端伺服器Vercel
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
今天我們引入了 Build Output API, 一個檔案系統為基底的規格, 允許任何框架都可以讓 Vercel 建置, 並且取用了 Vercel 的優勢, 也就是 Vercel 的 infrastructure building blocks, 像是 Edge Functions, Edge M
Thumbnail
今天我們引入了 Build Output API, 一個檔案系統為基底的規格, 允許任何框架都可以讓 Vercel 建置, 並且取用了 Vercel 的優勢, 也就是 Vercel 的 infrastructure building blocks, 像是 Edge Functions, Edge M
Thumbnail
Vue CLI與React的create-react-app是類似的工具,目的都是為了讓開發者快速建置環境,節省複雜的安裝相關環境的時間,簡單的一個建立專案指令與設定,即建立一個內建了Hot-Reload, webpack, ESLint等功能的專案。 安裝Vue CLI: 選擇檢查程式碼的時機
Thumbnail
Vue CLI與React的create-react-app是類似的工具,目的都是為了讓開發者快速建置環境,節省複雜的安裝相關環境的時間,簡單的一個建立專案指令與設定,即建立一個內建了Hot-Reload, webpack, ESLint等功能的專案。 安裝Vue CLI: 選擇檢查程式碼的時機
Thumbnail
安裝設置: 安裝完成後,專案目錄結構如下: 執行$ npm run dev 可直接透過http://localhost:3000進入首頁,對應到pages/index.js。 Prod記得每次要先build再start: Example: SSG: 透過外部api取得資料建立靜態頁面 結論:
Thumbnail
安裝設置: 安裝完成後,專案目錄結構如下: 執行$ npm run dev 可直接透過http://localhost:3000進入首頁,對應到pages/index.js。 Prod記得每次要先build再start: Example: SSG: 透過外部api取得資料建立靜態頁面 結論:
Thumbnail
Nuxt.js 是以 Vue 為基底所建構的框架,透過 Nuxt.js,我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
Thumbnail
Nuxt.js 是以 Vue 為基底所建構的框架,透過 Nuxt.js,我們能夠更輕鬆地開發靜態頁面 (Static Site)、操作體驗良好的單頁式網站 (SPA)、甚至是顧及 SEO 的伺服器端渲染 (SSR) 網站。
Thumbnail
接續上一篇,這邊要來寫一個React hello world app,最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
Thumbnail
接續上一篇,這邊要來寫一個React hello world app,最後安裝webpack-dev-server來提升開發效率。 使用npm安裝react, react-dom: $ npm install react react-dom --save dependencies下紀錄的是生產環境會
Thumbnail
React開發有兩種方式,一種是使用CDN方式include react的官方lib,然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等,還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生,就是為了解決上述的問題,
Thumbnail
React開發有兩種方式,一種是使用CDN方式include react的官方lib,然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等,還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生,就是為了解決上述的問題,
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News