使用ng-packagr打包Angular的方法示例

长沙网络推广有一款值得分享的Angular打包工具使用方法，让我为你详细解读。那就是通过使用ng-packagr进行Angular类库的打包。接下来让我们一起深入了解并尝试使用它。

让我们理解一下背景知识。Angular为了使得类库的应用范围更加广泛，提出了一套打包格式建议，即Angular Package Format（APF）。这其中包含了多种格式，如FESM2015、FESM5、UMD、ESM2015、ESM5和ES2015等，这些格式可以在不同的环境中使用，如Angular Cli、Webpack以及SystemJS等。

在传统的打包方式中，需要针对这些格式逐一进行打包，而且需要编写复杂的脚本。这种方式不仅难以维护，而且如果不了解这些格式的本质，很难进行正确的配置。幸运的是，社区根据APF规范实现了类库ng-packagr，通过简单的配置就可以将你的类库打包成APF规范格式。从Angular V6开始，Angular Cli也基于ng-packagr实现了应用构建器。

那么如何使用ng-packagr呢？其实非常简单。在Angular Cli中，使用ng g library命令就可以创建一个类库模板。例如，你可以在一个新的Angular应用中执行ng g library 来创建一个类库。打包也非常简单，只需要执行ng build 即可。最终，将生成的dist/目录下的文件上传到相应的包管理服务器（如npm），就可以供其他人使用了。

接下来我们介绍一下ng-packagr的配置。由Angular Cli生成的类库模板大部分内容和Angular应用相似，但多了一个ng-package.json配置文件（生产环境是ng-package.prod.json）。这个配置文件是专门针对ng-packagr的，基于JSON Schema格式。下面我们介绍几个重点项的配置。

首先是whitelistedNonPeerDependencies项。ng-packagr默认会根据package.json的peerDependencies节点清单来决定类库所需的第三方依赖包。当某些依赖包不在peerDependencies节点里时（建议需要的项应该在里面），就需要配置这个属性。

接下来是lib/entryFile项，用于指定入口文件。还有lib/umdModuleIds项，当使用UMD格式打包时，如果类库需要引用一些无法正确猜测的UMD标识符时，就需要手动映射这些类库的标识。例如，"umdModuleIds": {"lodash": "_"}表示将lodash的UMD标识符映射为"_"。

在angular.json配置文件中，会增加一个以命名的构建配置。这个配置与普通的Angular应用非常相似，但builder节点为"@angular-devkit/build-ng-packagr:build"，表示使用ng-packagr进行构建。还可以通过次级入口的方式来组织类库文件，以便更好地管理和优化体积。例如，一个类库可能包含多个次级入口，像@angular/core类库包含@angular/core/testing模块一样。通过这种方式可以更好地控制哪些模块被打包进主库，哪些模块作为次级模块提供额外的功能。这对于优化性能和减小包体积非常有帮助。使用ng-packagr可以简化Angular类库的打包过程并提供更好的灵活性。希望这篇文章能对你有所帮助！构建Angular类库的结构概览与自定义构建流程

一个Angular类库的结构大体上包括以下几个主要部分：、src、ng-package.json、ng-package.prod.json、package.json、tsconfig.lib.json以及tsconfig.spec.json等。当根目录下包含README.md、LICENSE文件时，它们会自动被复制到dist目录中。

对于想要创建一个次级入口的情况，只需在根目录下创建一个名为testing的目录，并在其中提供必要的文件结构即可。核心是需要提供一个简单的package.json文件，内容基本只需要包含"ngPackage": {}即可。使用ng build 命令，可以生成一个次级导入模块。

利用Angular Cli可以快速构建一个可发布于Npm的Angular类库，甚至可以构建像ngx-bootstrap、@angular/cdk/这类更复杂的类库。对于更复杂的环境，比如包含多个类库和次级导入的情况，我们可以使用@angular-devkit/build-ng-packagr进行自定义构建。自定义构建的流程可以通过一个简单的脚本实现，该脚本利用ngPackagr()方法对项目进行构建，并可以在构建前后执行额外的操作。

ng-packagr极大简化了Angular类库的打包过程，并遵循APF（Angular Package Format）规范。虽然它以ng-开头，但其实并不局限于在Angular中使用，也可以用于React、VUE等其他框架。

以上就是本文的主要内容，希望对大家的学习有所帮助。同时也希望大家能够关注并支持狼蚁SEO，我们会持续为大家带来有关技术和知识的分享。

（注：以上内容仅为示例，实际结构和操作可能因项目需求和版本差异而有所不同。）

（注：本文由cambrian渲染引擎输出，渲染指令为cambrian.render('body')。）