🔧 阿川の電商水電行
我們很高興地宣布 AnalogJS 2.0 版本發布！此版本包含許多新功能，可協助開發者使用 Angular 更快地交付網站和應用程式。
此次發布標誌著 Analog 的第二個主要版本，為開發者提供了許多使用 Analog 進行建置的新功能和改進。
特點⭐️
Analog 是一個基於 Angular 建構的元框架，它由新一代開源建置工具Vite和開源伺服器引擎框架Nitro提供支援。以下是它的一些特性：
-
為 Vite 生態系統（Vitest、Playwright、Storybook 等）提供一流的支援
-
支援 Markdown頁面和博客
-
支援 Angular CLI/ Nx 工作區
-
伺服器和部署支援
-
還有更多！
什麼是新的
Analog 2.0 包含許多新功能，包括內容資源、更小的安裝套件大小優化以及 Vite 生態系統升級。
內容資源📜
隨著 Angular 不斷發展並引入資源，Analog 現在也包含了用於顯示內容清單和內容檔案的資源。
內容文件資源用於顯示已載入內容的清單。
import { Component } from '@angular/core';
import { contentFilesResource } from '@analogjs/content/resources';
import { PostsComponent } from '../../components/posts';
import { Post } from '../../data/posts';
@Component({
selector: 'blog-posts',
imports: [Posts],
template: `
@defer(hydrate on hover) {
<posts [posts]="postsResource.value()"></posts>
}
`
})
export default class Blog {
readonly postsResource = contentFilesResource<Post>();
}內容文件資源以訊號的形式檢索內容，並與 Angular 最新的響應式原語整合。
import { Component } from '@angular/core';
import { MarkdownComponent } from '@analogjs/content';
import { contentFileResource } from '@analogjs/content/resources';
import { RouteMeta } from '@analogjs/router';
import { Post } from '../../data/posts';
import { postMetaResolver, postTitleResolver } from './resolvers';
export const routeMeta: RouteMeta = {
title: postTitleResolver,
meta: postMetaResolver,
};
@Component({
selector: 'post',
imports: [MarkdownComponent],
template: `
@let post = postResource.value();
@if (post) {
<div class="flex flex-grow justify-center min-h-screen">
<article class="w-screen max-w-4xl p-8">
<h2 class="text-gray-600 text-2xl">{{ post.attributes.title }}</h2>
<span class="font-light text-sm">
{{ post.attributes.publishedDate }} -
{{ post.content }} min read
</span>
<analog-markdown [content]="post.content"></analog-markdown>
</article>
</div>
}
`
})
export default class BlogPost {
readonly postResource = contentFileResource<Post>();
}由於 Angular 中的資源功能仍處於實驗階段，未來會有更新，我們也希望在 Analog 中進一步支援這些新的 API。
安裝和軟體包大小優化📦
我們持續改進 Analog 專案，包括安裝專案依賴項和最佳化軟體包大小。具體改進包括：
-
Angular CLI 工作區的安裝佔用空間更小，無需任何 Webpack 相依性。
-
所有 Angular 建構器均以 ESM 格式發布。
-
用較小的等效包替換較大的包，例如使用
tinyglobby代替fast-glob。 -
除了使用
ng serve外，還可以直接使用 Vite CLI 進行 serve/build 操作。 -
除了使用
ng test外，還可以直接使用 Vitest CLI 進行測試。 -
對於全端專案，產生的捆綁包輸出大小減少了 100Kb 以上。
這些優化措施縮短了 Analog 開發專案的安裝時間，並減少了建置和交付的程式碼量。
Vite 生態系統升級⚡️
Analog 將繼續整合並支援許多 Vite 生態系統整合：
-
支援 Angular v17-v20，即將支援 Angular v21
-
支援 Vite 6.x 和 7.x 版本，包括對最新 Rolldown-Vite 版本的支持
-
Vitest 3.x 和 4.x 版本，包括對 Vitest VSCode 擴充功能的支持
-
Nx 22.x
-
Storybook 10.x，包括使用 Vitest 進行元件測試的支持
-
Astro 5.x
Vitest 的 Angular 支援 🧪
在 Angular v21 中，Angular CLI 為新的 Angular 專案引入了對 Vitest 的穩定支援。雖然 Analog 和 Angular 都支援使用 Vitest 執行測試，但它們之間既有一些相似之處，也存在一些關鍵差異。
下表顯示了兩種選擇所具備的功能。
| Vitest | Analog | Angular |
| -------------------- | --------- | ------------ |
| Angular 版本 | v17+ | v21+ |
|維度測試版本 | 2.0+ | 4.0+ |
| 支援 | 社群 | Angular 團隊 |
| 建商 | ✅ | ✅ |
| 原理圖 | ✅ | ✅ |
| 遷移 | ✅ | ✅ |
| 完全可設定 | ✅ | ⚠️ |
| Vitest CLI | ✅ | ❌ |
| Vitest 工作空間 | ✅ | ❌ |
| 自訂環境 | ✅ | ❌ |
| 客製化服務商 | ✅ | ❌ |
| IDE 擴充 | ✅ | ❌ |
| 可建置庫 | ✅ | ❌ |
| 模組模擬/圖表 | ✅ | ❌ |
| 插件/類型 | ✅ | ❌ |
上表並非用於比較兩種方案，而是提供每種方案支援的功能資訊。請選擇最符合您需求和優先順序的方案。
請查看我們的指南，以了解如何將 Vitest 新增到任何現有的 Angular 專案中。
貢獻與社區🤓
如果沒有核心貢獻者和合作者的團隊，AnalogJS 就不會擁有今天的成就。
此外，也要感謝150 多位為該專案做出貢獻的人，無論他們是透過程式碼、文件、測試，還是只是試用該專案。
該專案在GitHub上已經擁有近 3000 個星標，在Discord上擁有 1000 多名成員，在Twitter/X上擁有 1000 多名追蹤者，並被納入了第一屆GitHub 加速器計畫。
與 Analog 合作🤝
如果沒有合作夥伴和社群的支持，Analog 的持續開發將無法實現。感謝我們的官方部署合作夥伴Zerops ，以及長期支持者Snyder Technologies 、 Nx和House of Angular ，還有許多其他專案支持者。
了解更多合作機會訊息，或直接聯繫 partnerships[at]analogjs.org。
加入社群🥇
如果你喜歡這篇文章，請點擊 :heart: 讓更多人看到。在 Twitter/X 上關注AnalogJS和我 (https://twitter.com/brandontroberts)，並訂閱我的[YouTube 頻道](https://youtube.com/brandonrobertsdev?sub_confirmation=1)以獲取更多內容！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
