将功能模块打包成第三方npm包

最新推荐文章于 2025-01-21 10:43:44 发布

sxjlinux

最新推荐文章于 2025-01-21 10:43:44 发布

阅读量6.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sunxiaoju/article/details/86478860

本文详细介绍了如何在Angular项目中创建自定义组件库，并将其发布到npm的过程。从初始化项目、创建组件，到配置模块、发布npm包，再到安装使用，每个步骤都配以代码示例和截图说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先通过ng new master创建一个master项目，如下图所示：

2、输入y后一路回车即可，如下图所示：

3、然后cd到项目中，执行如下命令：

ng g library battery-tree --prefix wincom

如下图所示：

创建第三方库 (--prefix: 前缀；在用命令行新建组件/指令时，selector的属性值的前缀，如图所示前缀为wincom，然后是库的名称)

4、此时目录中会有一个projects文件夹，如下图所示：

5、然后就是库的名称，如下图所示：

6、以下就是自动生成的文件以及文件夹

6、此时在项目的根目录中的angular.json中会自动添加库的信息，如下图所示：

7、然后使用vscode打开文件夹，选择项目的文件，如下图所示：

8、此时将项目使用vscode打开了，如下图所示：

9、然后修改项目的package.json加入第三方依赖包，如下图所示：

10、然后打开终端输入npm install安装新加的依赖包，如下图所示：

11、配置新加的依赖包，首先打开angular.json文件，然后在其中添加相应的配置

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "master": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/master",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input":"node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "src/styles.css",
              "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "master:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "master:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "master:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "master-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "master:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "master:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "battery-tree": {
      "root": "projects/battery-tree",
      "sourceRoot": "projects/battery-tree/src",
      "projectType": "library",
      "prefix": "wincom",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "projects/battery-tree/tsconfig.lib.json",
            "project": "projects/battery-tree/ng-package.json"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/battery-tree/src/test.ts",
            "tsConfig": "projects/battery-tree/tsconfig.spec.json",
            "karmaConfig": "projects/battery-tree/karma.conf.js"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "projects/battery-tree/tsconfig.lib.json",
              "projects/battery-tree/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "master"
}

如下图所示：

12、然后在配置battery-tree.module.ts文件，代码如下：

import { NgModule } from '@angular/core';
import { BatteryTreeComponent } from './battery-tree.component';
import {NgZorroAntdModule} from 'ng-zorro-antd';
@NgModule({
  declarations: [BatteryTreeComponent],
  imports: [
    NgZorroAntdModule
  ],
  exports: [BatteryTreeComponent]
})
export class BatteryTreeModule { }

将NgZorroAntdModule加入到imports中，如下图所示：

如果在battery-tree还有其他的Component，则需要将其他的也加入到exports: [BatteryTreeComponent]中，否则无法导出。

13、然后在battery-tree.component.ts加入信息，如下代码所示：

import { Component, OnInit } from '@angular/core';
import {NzFormatEmitEvent} from 'ng-zorro-antd';
import {Router} from '@angular/router';
@Component({
  selector: 'wincom-battery-tree',
  template: `
    <nz-tree
        [nzData]="nodesLine"
        nzCheckable="true"
        nzShowLine="true"
        (nzClick)="nzEvent($event)">
    </nz-tree>
  `,
  styles: []
})
export class BatteryTreeComponent implements OnInit {
  constructor(public router: Router) { }

  ngOnInit() {
  }
  nodesLine = [ {
    title   : 'parent 1',
    key     : '100',
    expanded: true,
    children: [ {
      title   : 'parent 1-0',
      key     : '1001',
      expanded: true,
      children: [
        { title: 'leaf', key: '10010', isLeaf: true },
        { title: 'leaf', key: '10011', isLeaf: true },
        { title: 'leaf', key: '10012', isLeaf: true }
      ]
    }, {
      title   : 'parent 1-1',
      key     : '1002',
      children: [
        { title: 'leaf', key: '10020', isLeaf: true },
        { title: 'leaf', key: '100101', isLeaf: true },
        { title: 'leaf', key: '100112', isLeaf: true },
        { title: 'leaf', key: '100123', isLeaf: true }
      ]
    }, {
      title   : 'parent 1-2',
      key     : '1003',
      children: [
        { title: 'leaf', key: '10030', isLeaf: false, children: [
            { title: 'leafsdfsasdf', key: '100307', isLeaf: true },
            { title: 'leaf', key: '100318', isLeaf: true },
            { title: 'leaf', key: '100107', isLeaf: true },
            { title: 'leasdfasssssssssssssssfsdf', key: '100118', isLeaf: true },
            { title: 'leaf', key: '100129', isLeaf: true }
          ]},
        { title: 'leaf', key: '10031', isLeaf: false, children: [
            { title: 'leaf', key: '1003012', isLeaf: false, children: [
                { title: 'lesdfsdfsssssssssssssssssssdaf', key: '1003017', isLeaf: true },
                { title: 'leaf', key: '1003118', isLeaf: true },
                { title: 'leaf', key: '1001017', isLeaf: true },
                { title: 'lesdfadfssdsssssssssssssssssssfsfsadaf', key: '1001118', isLeaf: true },
                { title: 'leaf', key: '1001219', isLeaf: true }
              ]},
            { title: 'leaf', key: '1003134', isLeaf: true },
            { title: 'leaf', key: '10010445', isLeaf: true },
            { title: 'leaf', key: '10011545', isLeaf: true },
            { title: 'leaf', key: '10012656', isLeaf: true }
          ] },
        { title: 'leaf', key: '100104566', isLeaf: true },
        { title: 'leaf', key: '1001156778', isLeaf: true },
        { title: 'leaf', key: '100126898', isLeaf: true }
      ]
    } ]
  } ];
  nzEvent(event: NzFormatEmitEvent): void {
    console.log(event);
  }
}

14、然后在app.module.ts文件中加入刚刚填写的模块，如下代码所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {HttpClientModule} from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import zh from '@angular/common/locales/zh';
import {NgZorroAntdModule, NZ_I18N, zh_CN} from 'ng-zorro-antd';
import {registerLocaleData} from '@angular/common';
import {BatteryTreeModule} from '../../projects/battery-tree/src/lib/battery-tree.module'
registerLocaleData(zh);
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    NgZorroAntdModule,
    BatteryTreeModule,
    AppRoutingModule
  ],
  providers: [{ provide: NZ_I18N, useValue: zh_CN }],
  bootstrap: [AppComponent]
})
export class AppModule { }

如下图所示：

15、然后在app.component.html文件中加入<wincom-battery-tree></wincom-battery-tree>，如下图所示：

16、然后通过ng serve --open启动服务，此时即可显示树，如下图所示：

如果想在加入一个tree的控件可以分别执行如下命令：

cd projects/battery-tree/src/lib
ng g c tree

如下图所示：

17、此时在本地运行没有问题，那么就开始发布了，首先cd到battery-tree目录构建npm包，如下图所示：

18、然后执行ng build battery-tree命令，如下图所示：

19、此时在根目录中会生成一个dist目录，如下图所示：

20、然后cd到dist/battery-tree目录，如下图所示：

21、然后开始上传到npm网站中，首先执行如下命令设置当前目录的镜像

npm config set registry https://registry.npmjs.org

如下图所示：

22、使用npm login登录（注意：必须先在npm官网注册账号并且已经通过邮箱认证激活才行），输入用户名，密码，邮箱等信息，如下图所示：

23、然后执行npm publish即可将该包上传至npm官网，如下图所示：

24、然后登录官网查看即可看到上传的npm包，如下图所示：

25、然后就可以通过npm来安装使用了，比如我们新建一个treeTest项目，如下图所示：

26、然后修改package.json文件，加入对应的依赖包，如下图所示：

27、然后重新执行npm install即可。

28、此时node_modules目录就会有刚刚上传的npm包，如下图所示：

29、在angular.json的配置与第11步相同，如下图所示:

30、然后在app.module.ts中添加如下代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {HttpClientModule} from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import zh from '@angular/common/locales/zh';
import {NgZorroAntdModule, NZ_I18N, zh_CN} from 'ng-zorro-antd';
import {registerLocaleData} from '@angular/common';
import {BatteryTreeModule} from 'battery-tree';
registerLocaleData(zh);
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    NgZorroAntdModule,
    BatteryTreeModule,
    AppRoutingModule
  ],
  providers: [{ provide: NZ_I18N, useValue: zh_CN }],
  bootstrap: [AppComponent]
})
export class AppModule { }

注意此处的BatteryTreeModule位置是从node_modules中导入的，如下图所示：