时间戳

首页 > 解决方案 > HOW-TO：Angular 库分为独立的功能子库

javascript - HOW-TO：Angular 库分为独立的功能子库

问题描述

我目前正在开发一个 Angular 库（在Angular v 8.1.0中）并且想知道如何将它“拆分为不同的子库”？

例如，Angular ( @angular) 以某种方式拆分为不同的“部分”，例如：

例如，@angular/common有不同的子目录可供导入：

我想知道如何在我自己的 Angular 库中进行这种结构化，以保持不同的上下文元素彼此独立。假设我的库被调用cool-lib，并且有不同的功能模块包含它们自己的服务/组件/等：common, featureA, featureB.

我想实现这样的目标：

import { CommonService } from 'cool-lib/common';
import { FeatAComponent, FeatAService } from 'cool-lib/feature-a';
import { FeatBModule } from 'cool-lib/feature-b';

而不是：

import { 
  CommonService, 
  FeatAComponent, 
  FeatAService,
  FeatBModule
} from 'cool-lib';

甚至能够独立地增加不同功能模块的版本号，或者只安装那些将需要的模块而不必安装整个库（假设我只需要featureA），这也是很好的。

例如，在我的package.json上有：

{
  "dependencies": {
    "cool-lib/common": "1.0.0",
    "cool-lib/feature-a": "1.0.0",
    "cool-lib/feature-b": "1.3.0"
  }
}

要不就：

{
  "dependencies": {
    "cool-lib/feature-a": "1.0.0"
  }
}

代替：

{
  "dependencies": {
    "cool-lib": "1.0.0"
  }
}

到目前为止，我已经阅读了很多关于创建 Angular 库的内容，但是找不到这个特定的用例，因为它们都只涵盖了在 npm 上创建和发布它们的基础知识......所以非常欢迎任何关于这方面的帮助！

标签： javascriptangulartypescriptangular-libraryng-packagr

解决方案

Angular 已经支持多个开箱即用的子库。

默认项目结构包含一个“app”应用程序，它是一个常规的 Angular 项目，然后您添加额外的子库，这些子库是 Angular 库项目。有放置在library子文件夹中。

单个 Angular 项目可以包含多个子库项目。

每个子库项目都可以作为单独的 npm 包发布，因为它们有自己的package.json文件。

npm 支持称为范围包名称的东西。它允许您将包命名为包的范围在@angular/core哪里。@angular

你可以像这样将一个作用域库添加到你当前的 Angular 项目中。

ng generate library @my-scope/my-library

从范围项目导入时，它必须以范围为前缀。

例如;

import { CommonService } from '@cool-lib/common';
import { FeatAComponent, FeatAService } from '@cool-lib/feature-a';
import { FeatBModule } from '@cool-lib/feature-b';

在上面，名称@cool-lib是作用域，common是 npm 包的名称。

使用范围可以让你做两件基本的事情（据我所知）。

  1. 防止与其他包的名称冲突，例如@cool-lib/animations不会与@angular/animations
  2. 将包裹组织成node_modules/@cool-lib

推荐阅读