當(dāng)前位置：首頁 > 科技 > 軟件

Astro 4.0 正式發(fā)布，爆火的現(xiàn)代化前端框架

來源：責(zé)編：時(shí)間：2023-12-08 09:15:35 291觀看

導(dǎo)讀12 月 5 日，現(xiàn)代化前端框架 Astro 4.0 版本正式發(fā)布！該版本提供了全新的 API、更快的構(gòu)建速度、重新設(shè)計(jì)的文檔，以及為 Astro 提供了獨(dú)特的新開發(fā)工具，以新穎有趣的方式增強(qiáng)本地開發(fā)環(huán)境！Astro 是一個(gè)現(xiàn)代化的靜態(tài)站點(diǎn)生成

12 月 5 日，現(xiàn)代化前端框架 Astro 4.0 版本正式發(fā)布！該版本提供了全新的 API、更快的構(gòu)建速度、重新設(shè)計(jì)的文檔，以及為 Astro 提供了獨(dú)特的新開發(fā)工具，以新穎有趣的方式增強(qiáng)本地開發(fā)環(huán)境！

Astro 是一個(gè)現(xiàn)代化的靜態(tài)站點(diǎn)生成器和前端框架，它具有獨(dú)特的設(shè)計(jì)理念：島嶼架構(gòu)。它允許開發(fā)人員使用組件化的方式構(gòu)建內(nèi)容優(yōu)先的網(wǎng)站，將各種技術(shù)棧（如 React、Vue、Svelte 等）的組件無縫集成到同一個(gè)項(xiàng)目中。2022 年，Astro 在 JavaScript 明星項(xiàng)目中排名第七，一年新增了 15k Star，目前已獲得了 37.4k Star！

了解更多：Astro，這個(gè)前端框架有點(diǎn)不一樣！

Astro 4.0 的更新亮點(diǎn)包括：

Astro 開發(fā)工具欄
國際化（i18n）路由
增量內(nèi)容緩存（實(shí)驗(yàn)性功能）
全新的視圖過渡 API
重新設(shè)計(jì)的日志記錄
重新設(shè)計(jì)的文檔

可以直接訪問astro.new在瀏覽器中嘗試 Astro 4.0，或者在終端中運(yùn)行以下命令來創(chuàng)建新項(xiàng)目：

npm create astro@latest

Astro 開發(fā)工具欄

Astro 4.0 引入了開發(fā)工具欄，它可以增強(qiáng)和定制在本地瀏覽器中使用 Astro 的開發(fā)體驗(yàn)。可以檢查頁面、捕捉棘手的無障礙問題，并使用自定義應(yīng)用和第三方工具來擴(kuò)展工具欄功能。

Astro 開發(fā)工具欄僅在開發(fā)過程中出現(xiàn)在瀏覽器中，不會(huì)出現(xiàn)在最終的生產(chǎn)構(gòu)建中。該工具欄默認(rèn)隱藏在頁面底部，直到需要它時(shí)才會(huì)顯示出來。將鼠標(biāo)懸停在附近，工具欄將彈出并提供以下幾個(gè)不同的應(yīng)用：

Inspect：突出顯示頁面上的交互式 UI 組件島嶼。該工具欄應(yīng)用旨在利用 Astro 獨(dú)特的島嶼架構(gòu)。通過突出顯示頁面上的島嶼，可以幫助開發(fā)者了解哪些元素是交互式的，哪些是輕量級(jí)的靜態(tài) HTML。然后，可以查看props 并單擊以直接在代碼編輯器中打開組件。
Audit：運(yùn)行一系列測試，對頁面進(jìn)行常見無障礙問題的審核。通過此功能，在瀏覽器中即可立即捕捉到?jīng)]有alt文本或配置錯(cuò)誤的 ARIA 角色屬性的圖像，無需離開瀏覽器。
Sentry：Astro 與 Sentry 合作設(shè)計(jì)了此工具欄的初始版本。Sentry 是 Web 應(yīng)用監(jiān)控平臺(tái)的領(lǐng)軍者，他們很高興能合作開發(fā) Astro 的新獨(dú)立調(diào)試工具。
Storyblok：Storyblok 是 Astro 官方的 CMS 合作伙伴，并作為其 Astro 集成的一部分，提供了一個(gè)工具欄應(yīng)用。在 Astro 4.0 中，所有 Storyblok 用戶都應(yīng)該看到一個(gè)新的應(yīng)用，可以快速訪問 Storyblok + Astro 的文檔、教程和社區(qū)資源，未來還將推出更多 CMS 功能。
第三方應(yīng)用：Astro 開發(fā)人員和第三方集成作者可以使用新的 Dev Toolbar API 來構(gòu)建自己的嵌入式 JavaScript 應(yīng)用以進(jìn)行開發(fā)。這解鎖了一種全新的原始方法來構(gòu)建開發(fā)工具，使功能如下：

直接在瀏覽器中顯示測試和 Linting 錯(cuò)誤。
使用localtunnel將開發(fā)環(huán)境公開到公共互聯(lián)網(wǎng)。
輕松訪問外部工具，例如Squoosh圖像優(yōu)化器。
內(nèi)部團(tuán)隊(duì)管理面板，以自動(dòng)化常見任務(wù)，例如在開發(fā)過程中切換用戶帳戶。

在接下來的幾個(gè)月中，Astro 團(tuán)隊(duì)將繼續(xù)通過引入新功能和第三方 API 來提高工具欄的性能。如果想在項(xiàng)目中禁用應(yīng)用工具欄，可以更新配置文件，并運(yùn)行astro preferences disable devToolbar --global 以在機(jī)器上全局禁用工具欄并適用于所有項(xiàng)目。

國際化（i18n）路由

作為 Web 開發(fā)人員，處理國際化通常意味著為代碼庫增加了許多額外的復(fù)雜性：路由、重定向、翻譯、相對鏈接處理等。

Astro 4.0 引入了新的國際化路由，幫助開發(fā)者以更少的復(fù)雜性構(gòu)建全球可訪問的網(wǎng)站。利用新的 Astro 功能，如自動(dòng) i18n 路由和低級(jí)別輔助函數(shù)，處理 URL。

Astro 新內(nèi)置的路由支持通過中央配置定義區(qū)域設(shè)置：

import { defineConfig } from "astro/config"export default defineConfig({  i18n: {    defaultLocale: "en",    locales: ["en", "es", "pt-br"]  }})

可以通過以下方式定制國際化路由的行為：

回退策略：當(dāng)特定語言環(huán)境下的內(nèi)容不可用時(shí)，可以設(shè)置回退策略，以便在其他語言版本中提供相應(yīng)的內(nèi)容。
前綴行為：可以添加語言環(huán)境名稱到 URL 中作為前綴，以區(qū)分不同語言版本的頁面。
別名支持：可以為常見的語言環(huán)境和語言代碼設(shè)置別名，使其更易于識(shí)別和訪問。

對于使用服務(wù)端渲染（SSR）的 'server' 構(gòu)建，Astro 能夠自動(dòng)檢測用戶的首選語言，這樣就可以進(jìn)一步定制內(nèi)容、添加重定向或者進(jìn)一步定制路由處理。

國際化路由支持最初是作為實(shí)驗(yàn)性功能添加到 Astro 3.5 中的，如今，在 Astro 4.0 中已經(jīng)成為穩(wěn)定功能。

增量內(nèi)容緩存（實(shí)驗(yàn)性功能）

Astro 4.0 引入了增量內(nèi)容緩存作為實(shí)驗(yàn)性新功能，可顯著加快大型網(wǎng)站的構(gòu)建性能。

隨著時(shí)間的推移，代碼庫不斷增長，構(gòu)建網(wǎng)站的時(shí)間會(huì)越來越長。靜態(tài)網(wǎng)站由于在每次構(gòu)建時(shí)重新生成相同的頁面，這個(gè)問題更加嚴(yán)重。在 Astro 4.0 中，引入了緩存來幫助減少在astro build命令中進(jìn)行的重復(fù)和不必要的工作量。

在 Astro 官方文檔項(xiàng)目上啟用內(nèi)容緩存后，astro build中相關(guān)步驟的時(shí)間從 133.20 秒降低到 10.46 秒，速度提高了約 92%。整個(gè)構(gòu)建時(shí)間從 4 分鐘 58 秒減少到略超過 60 秒，總體構(gòu)建時(shí)間減少了 80%。在其他真實(shí)場景中也看到了類似的結(jié)果報(bào)告。

增量內(nèi)容緩存與Content Collections API 相關(guān)聯(lián)。由于 Astro 擁有訪問和管理集合內(nèi)內(nèi)容的 API，因此構(gòu)建可以使用內(nèi)部構(gòu)建清單安全地跟蹤集合內(nèi)的更改。Astro 可以在每次構(gòu)建時(shí)檢查緩存，并重復(fù)使用未更改的內(nèi)容項(xiàng)。

實(shí)驗(yàn)性支持增量內(nèi)容緩存最初是在 Astro 3.5 中以“Content Collections Build Cache”為名稱引入的。隨著繼續(xù)完善緩存行為，此功能在 4.0 中仍然是實(shí)驗(yàn)性的。如果想進(jìn)行實(shí)驗(yàn)，可以在項(xiàng)目配置中啟用experimental.contentCollectionCache，以獲得更快的構(gòu)建速度。

全新的視圖過渡 API

Astro 3.0 推出了 View Transitions，以使用僅有服務(wù)端渲染的 HTML 和最少量的客戶端 JavaScript 構(gòu)建交互式應(yīng)用體驗(yàn)。通過 Astro 中的 View Transitions，可以執(zhí)行以下操作：

在不加載龐大的單頁應(yīng)用的情況下，對不同頁面之間的導(dǎo)航進(jìn)行動(dòng)畫處理。
在頁面之間保持有狀態(tài)的 UI，例如視頻播放器和地圖。
自動(dòng)在不同頁面之間變換共同元素。
使用滑動(dòng)和淡入淡出效果賦予頁面更多個(gè)性。

自首次發(fā)布以來，Astro 不斷地改進(jìn)支持，并在 Astro 4.0 版本中進(jìn)一步完善了 View Transitions API 和用例：

表單：View Transitions 現(xiàn)在可以與靜態(tài) HTML 表單和動(dòng)態(tài)客戶端表單組件進(jìn)行交互，觸發(fā)表單提交時(shí)的過渡效果，而不是鏈接導(dǎo)航。
預(yù)取：現(xiàn)在可以指定鏈接在懸停、點(diǎn)擊或頁面上可見時(shí)應(yīng)預(yù)取，還可以在單個(gè)鏈接上啟用/禁用預(yù)取。
提供navigate()低級(jí) JavaScript API，可以用于手動(dòng)觸發(fā)導(dǎo)航。
完整的生命周期事件系統(tǒng)，可插入以自定義加載過程，甚至可以使用此功能將內(nèi)置元素交換算法替換為自己的算法。

重新設(shè)計(jì)的日志記錄

Astro CLI 的日志記錄體驗(yàn)改進(jìn)主要包括以下內(nèi)容：

移除不必要的日志記錄：以前，某些常見情況會(huì)導(dǎo)致重復(fù)記錄和其他不必要的日志，現(xiàn)在這些不必要的日志已經(jīng)被移除了。
更簡潔的錯(cuò)誤信息：現(xiàn)在，錯(cuò)誤信息在終端中占用的行數(shù)更少，這意味著當(dāng)出現(xiàn)問題時(shí)，在較小的終端上滾動(dòng)的次數(shù)更少。
優(yōu)化的堆棧跟蹤：默認(rèn)情況下，錯(cuò)誤不再包含無用的 Vite 運(yùn)行時(shí)內(nèi)部信息，從而提供了更清晰和精簡的堆棧跟蹤。

這些改進(jìn)使得 Astro 4.0 版本中的dev和build命令更易于閱讀、解析和調(diào)試。

重新設(shè)計(jì)的文檔

Starlight 是 Astro 官方文檔模板，包括了在過去兩年中構(gòu)建和管理大規(guī)模 Astro 文檔站點(diǎn)所收集的所有最佳實(shí)踐和模式。

現(xiàn)在，docs.astro.build 由 Starlight 驅(qū)動(dòng)。

由于 Astro 文檔的貢獻(xiàn)，Starlight 現(xiàn)在具有了 Expressive Code 和新的 Algolia 插件等功能。還將推出新的組件，例如交互式文件樹。

本文鏈接：http://www.www897cc.com/showinfo-26-39529-0.htmlAstro 4.0 正式發(fā)布，爆火的現(xiàn)代化前端框架

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇：一文講解TypeScript中的null和undefined的區(qū)別

下一篇：我常用的幾個(gè)經(jīng)典Python模塊

標(biāo)簽：

熱門焦點(diǎn)

容量越大越不壞？24萬塊硬盤故障率報(bào)告公布這些產(chǎn)品零故障

8月5日消息，云存儲(chǔ)服務(wù)商Backblaze發(fā)布了最新的硬盤故障率報(bào)告，年故障率有所上升。Backblaze發(fā)布的硬盤季度統(tǒng)計(jì)數(shù)據(jù)，其中包括故障率等重要方面。這些結(jié)
三言兩語說透設(shè)計(jì)模式的藝術(shù)-單例模式

寫在前面單例模式是一種常用的軟件設(shè)計(jì)模式，它所創(chuàng)建的對象只有一個(gè)實(shí)例，且該實(shí)例易于被外界訪問。單例對象由于只有一個(gè)實(shí)例，所以它可以方便地被系統(tǒng)中的其他對象共享，從而減少
信通院：小米、華為等11家應(yīng)用商店基本完成APP簽名及驗(yàn)簽工作

中國信通院表示，目前，小米、華為、OPPO、vivo、360手機(jī)助手、百度手機(jī)助手、應(yīng)用寶、豌豆莢和努比亞等9家應(yīng)用商店，以及抖音和快手2家新型應(yīng)用分發(fā)平
華為和江淮汽車合作開發(fā)百萬元問界MPV？雙方回應(yīng)來了

8月1日消息，郭明錤今天在社交平臺(tái)發(fā)文稱，華為正在和江淮汽車合作，開發(fā)售價(jià)在100萬元的問界MPV，預(yù)計(jì)在2024年第2季度量產(chǎn)，銷量目標(biāo)為上市首年交付5萬輛。
華為HarmonyOS 4.0將于8月4日發(fā)布或搭載AI大模型技術(shù)

華為宣布HarmonyOS4.0將于8月4日正式發(fā)布。此前，華為已經(jīng)針對開發(fā)者公布了HarmonyOS4.0，以便于開發(fā)者提前進(jìn)行適配，也因此被曝光出了一些新系統(tǒng)的特性
AI芯片初創(chuàng)公司Tenstorrent獲三星和現(xiàn)代1億美元投資

Tenstorrent是一家由芯片行業(yè)資深人士Jim Keller領(lǐng)導(dǎo)的加拿大初創(chuàng)公司，專注于開發(fā)人工智能芯片，該公司周三表示，已經(jīng)從現(xiàn)代汽車集團(tuán)和三星投資基金等
AMD的AI芯片轉(zhuǎn)單給三星可能性不大與臺(tái)積電已合作至2nm制程

據(jù) DIGITIMES 消息，英偉達(dá) AI GPU 出貨逐季飆升，接下來 AMD MI 300 系列將在第 4 季底量產(chǎn)。而半導(dǎo)體業(yè)內(nèi)人士表示，近日傳出 AMD 的 AI 芯片將轉(zhuǎn)單給
OPPO K11樣張首曝：千元機(jī)影像“卷”得真不錯(cuò)！

一直以來，OPPO K系列機(jī)型都保持著較為均衡的產(chǎn)品體驗(yàn)，歷來都是2K價(jià)位的明星機(jī)型，去年推出的OPPO K10和OPPO K10 Pro兩款機(jī)型憑借各自的出色配置，堪稱有
外交部：美方應(yīng)停止在網(wǎng)絡(luò)安全問題上不負(fù)責(zé)任地指責(zé)他國

　中國外交部今天（16日）舉行例行記者會(huì)。會(huì)上，有記者問，美國情報(bào)官員稱，他們正在阻攔來自中國以及其他國家的黑客獲取相關(guān)科研成果。中方對此有何評論？對此

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

Astro 4.0 正式發(fā)布，爆火的現(xiàn)代化前端框架

Astro 開發(fā)工具欄

國際化（i18n）路由

增量內(nèi)容緩存（實(shí)驗(yàn)性功能）

全新的視圖過渡 API

重新設(shè)計(jì)的日志記錄

重新設(shè)計(jì)的文檔

容量越大越不壞？24萬塊硬盤故障率報(bào)告公布這些產(chǎn)品零故障

三言兩語說透設(shè)計(jì)模式的藝術(shù)-單例模式

信通院：小米、華為等11家應(yīng)用商店基本完成APP簽名及驗(yàn)簽工作

華為和江淮汽車合作開發(fā)百萬元問界MPV？雙方回應(yīng)來了

華為HarmonyOS 4.0將于8月4日發(fā)布或搭載AI大模型技術(shù)

AI芯片初創(chuàng)公司Tenstorrent獲三星和現(xiàn)代1億美元投資

AMD的AI芯片轉(zhuǎn)單給三星可能性不大與臺(tái)積電已合作至2nm制程

OPPO K11樣張首曝：千元機(jī)影像“卷”得真不錯(cuò)！

外交部：美方應(yīng)停止在網(wǎng)絡(luò)安全問題上不負(fù)責(zé)任地指責(zé)他國

最新推薦

猜你喜歡

熱門推薦

相關(guān)資訊