当你需要一个组件来快速实现特定需求，并且打算在多个项目中使用时，可能会花时间在各类现有组件之间挑选。虽然有些组件看起来还不错，但总是难以完全符合你的要求。在这种情况下，不如考虑自己开发一个专属组件。本文将详细介绍如何从零开始开发一个组件并将其发布到NPM，让你能够更好地控制和满足项目需求。

前提

首先，你需要一个Angular应用来创建和导入我们的库。可以通过以下命令创建一个基础的Angular应用：

ng new angular-project

运行此命令后，你将得到一个基础的Angular应用程序。

创建library

ng generate library test-button

创建库后，打开你的angular.json文件，你会看到在projects对象下有两个项目：angular-project和test-button。它们的类型不同，分别是application和library。

你会发现，在项目的根目录下多了一个新的projects文件夹。这个文件夹用于存放你创建的所有库组件。当前，该文件夹中只包含一个名为test-button的库。随着项目的扩展，你可以在这个文件夹中添加更多的库，每个库都可以独立开发和管理。这种结构不仅有助于代码的模块化和复用，还方便在多个项目之间共享组件。

library的文件结构

public-api.ts文件是库的入口点。在这个文件中，你将导出希望用户使用的所有组件、服务和模块。因此，任何从这个文件导出的内容都可以被使用该库的用户访问。这种结构确保了库的外部接口清晰明了，使得用户只需关注公开的API，而不必深入了解库的内部实现。

创建组件

这是一个最基础的按钮组件，可以自定义文本的输入和设置字体大小。

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'lib-test-button',
  template: `<button [style.fontSize]="size + 'px'">{{ text }}</button>`,
  styles: [],
})
export class TestButtonComponent implements OnInit {
  @Input() size: number = 20;
  @Input() text: string = '这是一个按钮';

  constructor() {}

  ngOnInit(): void {}
}

构建组件

我们有了组件后需要构建它，使其能够被其他项目使用。通过构建，可以确保组件的代码在不同的环境中都能正常运行，并为后续的测试和发布做好准备。

ng build test-button --configuration=production --watch

构建完成后，你会在根目录下发现一个名为dist的文件夹。这个文件夹包含所有项目的生产版本，因此，不论是构建Angular库还是部署Angular前端应用程序，生成的文件都会存放在这里。我们可以像使用任何其他第三方库一样在我们的项目中使用它。尽管它并不存在于你的node_modules中。

测试组件

要在Angular中测试使用这个按钮，首先需要导入它。在你的 app.module.ts 文件中，导入test-button。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TestButtonModule } from 'test-button';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TestButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后你就可以在应用中使用它了。并且用ng serve运行起来查看效果。

<lib-test-button [size]="30" text="按钮"></lib-test-button>

我们能够在不将库安装到项目中的情况下正常导入它，这得益于我们在tsconfig.json文件中配置的paths。这个配置实际上重新映射了导入路径到我们指定的位置。因此，Angular不会像通常那样只在node_modules文件夹内查找库，而是会在我们指定的自定义位置寻找。

这种方式对于测试非常方便，因为如果我们要测试的功能不存在，通常需要先发布包，然后将其安装到应用程序中，才能进行测试。这样做非常麻烦。现在，只需运行构建命令，我们的库就会生成在dist文件夹中，我们随时可以对其进行测试。并且由于在命令中添加了--watch它可以实时更新。

登录NPM

现在我们已经测试了生产构建，接下来是将其推送到npm。首先需要创建一个npm账号并在VSCode登录你的npm账号。

npm login

包的作用域

在npm中，包的作用域（Scope）是一种命名约定，用于确保包名的唯一性，并将相关的包组织在一起。通常情况下，npm包的名称是公开的，全局唯一的，这意味着不同的开发者可以创建相同名称的包，但它们不会发生冲突。现在你需要打开库中的package.json文件。当前文件中的name目前设置为demo-button。将其改为@"作用域名称"/demo-button。

发布到NPM

首先进入到dist的库文件夹下。

cd .\dist\demo-button

然后发布到npm仓库（带有作用域的包默认是私有的。为了发布为公共包，需要添加 --access=public 标志）。

npm publish --access=public

最后你就可以在npm官网上看到你发布的包了并且随时下载。

创建Angular组件并发布到NPM

前提