官网本文档描述了目前npm上可用的Angular框架包的结构和格式。这种格式适用于分发Angular组件的包，例如AngularMaterial，以及发布在@angular命名空间下的核心框架包，例如@angular/core和@angular/forms。此处描述的格式使用独特的文件布局和元数据配置，使包能够在使用Angular的最常见场景中无缝工作，并使其与Angular团队和社区本身提供的工具兼容。出于这个原因，也强烈鼓励第三方库开发人员遵循相同的结构。该格式的版本与Angular本身一致，我们希望该格式以向前兼容的方式发展，以支持Angular组件和工具生态系统的需求。包格式的目的在当今的JavaScript环境中，开发人员以多种不同的方式使用包。例如，有些可能使用SystemJS，有些可能使用Webpack。不过，其他人可能会将Node或浏览器中的包用作UMD包或通过全局变量访问。Angular发行版支持所有常见的开发工具和工作流程，并强调优化，从而减少应用程序负载大小或加快开发迭代周期（构建时间）。库文件布局库通常应该使用相同的布局，但库中有与Angular框架不同的功能。通常，库在组件或功能级别进行拆分。我们以Angular的Material项目为例。AngularMaterial发布组件集，例如Button（单个组件）、Tabs（一组协同工作的组件）等。共同点是将这些功能区域绑定在一起的NgModule。按钮有一个NgModule，选项卡有另一个，等等。Angular包格式的一般规则是为最小的逻辑连接代码集生成FESM文件。例如，Angular包有一个用于@angular/core的FESM。开发者在使用来自@angular/core的Component符号时，很可能也会直接或间接地使用Injectable、Directive、NgModule等符号。因此，所有这些部分都应该捆绑在一起形成一个FESM。对于大多数库情况，应该将单个逻辑组组合成一个NgModule，并且所有这些文件都应该作为包中的单个FESM文件捆绑在一起，代表npm包中的单个入口点。以下是AngularMaterial项目在这种格式下的示例：再次查看Spartacus核心构建的输出：主入口点包的主入口点是其模块ID与包名称匹配的模块（例如，对于“@angular/core”包，从主入口点导入如下：import{Component,...}from'@angular/core')。二级入口点除了主入口点之外，包还可以包含零个或多个二级入口点（例如@angular/common/http）。这些包含我们不希望与主入口点中的符号分组的符号，原因有二：(1)用户通常认为它们与主符号组不同，如果它们与主符号组相关，则它们是已经在那里了。(2)次要组中的符号通常只在特定场景下使用（例如，编写和运行测试时）。这些符号可能不会包含在主入口点中，因此我们减少了它们被意外滥用的可能性（例如，在@angular/core/testing中使用的生产代码中使用测试模拟）。辅助入口点导入的模块ID将模块加载器定向到辅助入口点命名的目录。例如，“@angular/core/testing”解析为同名目录“@angular/core/testing”。该目录包含一个package.json文件，该文件将加载程序定向到它正在寻找的正确位置。这允许我们在一个包中创建多个入口点。编译和转译为了生成所有必需的构建工件，我们强烈建议您使用Angular编译器(ngc)编译您的代码，并在tsconfig.json中使用以下设置：{"compilerOptions":{..."declaration":真，“模块”：“es2015”，“目标”：“es2015”}，“angularCompilerOptions”：{“strictMetadataEmit”：真，“skipTemplateCodegen”：真，“flatModuleOutFile”：“my-ui-lib.js”，"flatModuleId":"my-ui-lib",}}与优化相关的ES模块扁平化我们强烈建议您在将ES模块发布到npm之前通过扁平化ES模块来优化构建工件。这显着减少了Angular应用程序的构建时间以及最终应用程序包的下载和解析时间。Angular编译器支持生成索引的ES模块文件，然后可以使用这些文件使用Rollup等工具生成扁平化模块，从而产生我们称为FlattenedESModules或FESM的文件格式。FESM是一种文件格式，其工作原理是将所有可从入口点访问的ES模块展平为单个ES模块。它是通过跟踪包中的所有导入并将该代码复制到单个文件中而形成的，同时保留所有公共ES导出并删除所有私有导入。缩写名称“FESM”（发音为“phesom”）后面可以跟一个数字，例如“FESM5”或“FESM2015”。这些数字指的是模块中JavaScript的语言级别。所以一个FESM5文件将是ESM+ES5（导入/导出语句和ES5源代码）。要生成扁平化的ES模块索引文件，请在tsconfig.json文件中使用以下配置选项：{"compilerOptions":{..."module":"es2015","target":"es2015",...},"angularCompilerOptions":{..."flatModuleOutFile":"my-ui-lib.js","flatModuleId":"my-ui-lib"}}一旦索引文件（例如my-ui-lib.js）生成通过ngc，打包器和优化器（例如Rollup）可用于生成扁平化的ESM文件。模板和样式表组件库的内联通常使用存储在单独文件中的样式表和html模板来实现。虽然不是必需的，但我们建议组件作者将模板和样式表内联到他们的FESM文件以及*.metadata.json文件中，方法是分别将styleUrls和templateUrl替换为样式和模板元数据属性。这简化了应用程序开发人员对组件的使用。从APFv10开始，我们建议添加tslib作为主入口点的直接依赖项，因为tslib版本与用于编译库的TypeScript版本相关联。一些术语包：发布到NPM并安装在一起的最小文件集，例如@angular/core。该包包含一个名为package.json的清单、编译后的源代码、TypeScript文件、源映射、元数据等。该软件包通过npminstall@angular/core安装。符号：模块中包含的类、函数、常量或变量，可选择通过模块导出对外部世界可见。模块ID：导入语句中使用的模块的标识符，例如“@斯巴达克斯/核心”。ID通常直接映射到文件系统上的路径，但由于各种模块解析策略，情况并非总是如此。模块格式：模块语法规范，至少包括从文件导入和导出的语法。常见的模块格式有CommonJS（CJS，常用于Node.js应用程序）或ECMAScript模块（ESM）。模块格式仅表示对单个模块的封装，而不表示用于组成模块内容的JavaScript语言特性。出于这个原因，Angular团队经常在模块格式后加上语言级别的说明符，例如ESM+ES5以指定模块是ESM格式并且包含降到ES5的代码。其他常见组合：ESM+ES2015、CJS+ES5、CJS+ES2015。bundle：由构建工具（例如WebPack或Rollup）生成的单个JS文件形式的工件，包含从一个或多个模块派生的符号。捆绑包是一种特定于浏览器的解决方法，可减少浏览器开始下载数百甚至数万个文件时可能出现的网络压力。Node.js通常不使用包。常见的捆绑格式是UMD和System.register。语言级别：代码的语言（ES5或ES2015）。独立于模块格式。入口点：打算由用户导入的模块。它由唯一的模块ID引用，并导出该模块ID引用的公共API。一个例子是@angular/core或@angular/core/testing。@angular/core包中有两个入口点，但它们导出不同的符号。一个包可以有多个入口点。深度导入：从不是入口点的模块中检索符号的过程。这些模块ID通常被认为是私有API，它们可以在项目的生命周期内或在为给定包创建包时发生变化。顶级导入：从入口点导入。可用的顶级导入定义公共API并在“@angular/name”模块中公开，例如@angular/core或@angular/common。treeshaking：从应用程序中识别和删除未使用代码的过程-也称为死代码消除。这是在应用程序级别使用Rollup、ClosureCompiler或Uglify等工具完成的。更多Jerry原创文章在这里：《王子熙》：
