Nuxt 3.7 正式發布,帶來全新CLI工具!
8 月 25 日,Nuxt.js 3.7 正式發布!該版本帶來了全新的 CLI,原生Web流和響應,渲染優化,異步上下文支持等許多新功能,下面就來一探究竟吧!
全新 CLI
Nuxt.js 團隊使用 unjs/citty[1] 重構了nuxi,并將其作為獨立的存儲庫,作為第一個依賴于新版本的Nuxt發布。"Nuxi"現在已經與主要的 Nuxt 版本解耦,計劃在未來迭代和更快地發布"Nuxi",可以期待很快會有新的功能推出!
Nuxt.js 團隊致力于開發一個新的、簡約的 CLI 實現,代號為“nuxi”,與 Nuxt 3 一起發布。該項目旨在與 Nuxt 并行地繼續進行 CLI 開發和增強,主要是為了實現新目標:
- 全局訪問:可以從任何地方立即訪問Nuxt CLI命令,用于啟動、初始化、開發、擴展構建和部署Nuxt項目。
- 模塊化架構:使用新的"citty"框架,可以將CLI子命令和功能從不同的源組合起來,提供可擴展性和自定義能力。
- 自動化操作:可以通過簡潔的命令一鍵完成項目的啟動、模塊或依賴的添加、Nuxt的升級、配置的修改和模板的創建。
- 優雅的界面:通過更好的核心集成,提供了更加信息豐富和漂亮的CLI界面。
- 可編程接口:通過公開的程序化API接口,可以使用開發工具和Web瀏覽器與CLI進行交互。
- 快速開發:具備獨立版本控制和自我升級支持,可以快速交付更新和實現新的想法。
原生 Web 流和 Response
隨著 unjs/h3[2] 和 unjs/nitro[3] 的改進,現在可以直接從服務端路由返回Response對象,這意味著也可以在 Nuxt 中返回和處理流。
HTML渲染優化
在這個版本中,在從服務端渲染HTML響應方面進行了一些改進。現在,我們會在構建時確定預加載/預獲取資源的方式(可以在build:manifest鉤子中自定義這一設置)。可以直接在unhead中管理了它們的HTML渲染,這意味著可以配置<link>、<meta>、<script>、<style>等元素的順序,而且根據初步測試結果,它甚至更快!
可以通過experimental.headNext標志來選擇即將推出的頭部改進。目前,它包括基于capo.js的新排序算法,并允許在未來發布的unhead中啟用更多的優化。
export default defineNuxtConfig({
experimental: {
headNext: true
}
})
構建環境快捷方式
在 Nuxt 配置中,現在可以使用 $client 和 $server 快捷方式來輕松定義特定于 Vite 客戶端/服務端或 Webpack 客戶端/服務端構建的特定配置。以前這只能通過 vite:extendConfig 和 webpack:config 鉤子實現。
例如:
export default defineNuxtConfig({
vite: {
$client: {
build: {
rollupOptions: {
output: {
chunkFileNames: '_nuxt/[hash].js',
assetFileNames: '_nuxt/[hash][extname]',
entryFileNames: '_nuxt/[hash].js'
}
}
}
}
}
})
Vite 4.4 支持
Nuxt.js 團隊決定取消對 Vite 的次要版本限制,這意味著無論 Vite 何時發布新的功能版本,都可以立即選擇使用。Vite 4.4 帶來了許多令人興奮的新功能,包括實驗性的 Lightning CSS 支持等!
TypeScript 更新
現在在生成的tsconfig.json中使用純相對路徑,而不是設置baseUrl。這意味著在開發環境(如Docker鏡像)中,當絕對路徑可能與 IDE 不匹配時,會有更好的支持。
此版本還設置了一些額外的編譯器標志默認值,以符合 Vite/TS 的建議。
此外,現在可以在setPageLayout和<NuxtLayout name>中獲得類型提示的訪問權限了。
Async Context 支持
如果你曾經遇到過"Nuxt context unavailable"的問題,那么這個更新可能對你有所幫助。現在在 Nuxt 和 Nitro 中都支持原生的異步上下文,在 Bun 和 Node 環境中可以使用實驗性標志進行開啟。
這使得在服務端可以使用 Nuxt 組合式函數,而無需確保它們直接在setup函數中被調用。在 Nitro 中也可以實現相同的功能,通過一個新的useEvent()實用工具在服務端路由中使用。
要嘗試它,需要啟用experimental.asyncContext標志:
export default defineNuxtConfig({
experimental: {
asyncContext: true
}
})
Watcher 更新
此版本修復了 watcher 的一些問題,這意味著開發者應該不需要經常重啟服務,并且如果使用圖層,應該會看到顯著的性能提升。
Nitro 2.6
Nitro 2.6 帶來了許多令人興奮的功能,包括更小、更輕的服務器和新的持久數據存儲在 .data 目錄中。
升級
與往常一樣,建議使用以下命令進行升級:
npx nuxi upgrade --force
這將刷新 lockfile,并確保從 Nuxt 依賴的其他依賴項中獲取更新,尤其是在 unjs[4] 生態系統中。
[1]unjs/citty: http://github.com/unjs/citty
[2]unjs/h3: https://github.com/unjs/h3
[3]unjs/nitro: https://github.com/unjs/nitro
[4]unjs: https://github.com/unjs