Angular Package Format (APF) v12.0 介绍

Angular Package Format (APF) v12.0 是用于分发 Angular 组件和核心框架包的标准化结构规范，旨在支持多种开发工具和工作流，同时优化构建性能与包体积。 该格式与 Angular 版本控制同步演进，强调向前兼容性，适用于 @angular 命名空间下的核心包（如 @angular/core）及第三方组件库（如 Angular Material）。以下是其核心要点：

• 多工具支持：兼容 SystemJS、Webpack、Node.js 等常见工具，支持 UMD、ESM 等模块格式，适应不同开发环境（浏览器或服务端）。
• 性能优化：通过扁平化模块（FESM）减少构建时间和应用负载体积，加速开发迭代。
• 生态统一：鼓励第三方库遵循相同结构，确保与 Angular 官方工具链无缝协作。

• 逻辑分组与 FESM 生成包应按最小逻辑单元划分代码，并为每个单元生成扁平化 ES 模块（FESM）。例如：

  @angular/core 的所有相关符号（如 Component、 Injecatable）捆绑为单个 FESM 文件。

  第三方库（如 Angular Material）按组件或功能模块分组，每个 NgModule 对应一个 FESM 文件。

• 示例：Spartacus 核心构建输出Spartacus 库的构建结果包含多个 FESM 文件（如 fesm2015/spartacus-core.js），按语言级别（ES2015）和模块格式组织。

• 主入口点模块 ID 与包名一致的模块（如 @angular/core），用户通过主入口导入核心符号：import { Component } from '@angular/core';

• 次要入口点用于隔离特定场景的符号（如测试工具），避免与主入口符号冲突。例如：

  @angular/core/testing 包含测试专用符号，通过独立目录和 package.json 定向加载。

  用户通过次要入口导入：

  import { TestBed } from '@angular/core/testing';

使用 Angular 编译器（ngc）生成构建工件，推荐 tsconfig.json 配置：

• 关键选项：

  flatModuleOutFile：指定 FESM 输出文件名。

  strictMetadataEmit：确保元数据严格生成，兼容 AOT 编译。

• FESM 扁平化通过 Rollup 等工具将多个 ES 模块合并为单个文件，减少构建时的模块解析开销。例如：

  输入：多个 import 语句分散的模块。

  输出：单个 fesm2015/my-lib.js 文件，包含所有导出符号。

• 模板与样式内联将组件的 templateUrl 和 styleUrls 替换为内联属性，简化用户使用：

  @Component({ template: `<div>Inline HTML</div>`, styles: [`div { color: red; }`]})

• 依赖管理自 APF v10 起，建议显式声明 tslib 为直接依赖，确保 TypeScript 运行时辅助函数版本兼容。

• Package：通过 npm 安装的最小文件集（如 @angular/core），包含 package.json、编译代码、源映射等。
• Symbols：模块导出的类、函数等可访问实体（如 Component 装饰器）。
• Module Format：模块语法规范（如 ESM、CJS），常附加语言级别说明符（如 ESM+ES2015）。
• Tree Shaking：通过工具（如 Rollup）移除未使用代码，优化包体积。

APF v12.0 通过标准化文件布局、入口点管理和优化策略，为 Angular 生态提供了高效的包分发方案。其核心优势包括：

• 工具链兼容性：支持主流构建工具和模块格式。
• 性能提升：FESM 和内联模板减少构建与解析时间。
• 生态协同：统一第三方库结构，降低集成成本。

开发者应遵循 APF 规范构建库，以充分利用 Angular 的优化机制和工具支持。