关于前端:保姆级的使用angular搭建自己的组件库

如果应用npm install 就能够装置自定义的组件库呢

1、 ng new projectname

此处的projectname为项目名称,我创立的为gram-angular2

2、 以创立一个gram.module和header.component为例。能够用cli命令或者手动创立

ng generate module modules/gram
ng generate component modules/header

3、在gram.module.ts增加内容

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from '../header/header.component';

@NgModule({
 declarations: [
 HeaderComponent  //这里改变了
 ],
 imports: [
 CommonModule
 ],
 exports: [
 HeaderComponent   //这里改变了
 ]
})
export class GramModule { }

exports确保将该模块中导出的组件能够被其它模块引入并应用。

4、增加GramModule到app.module中:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GramModule } from './modules/gram/gram.module';

@NgModule({
 declarations: [
 AppComponent,
 ],
 imports: [
 BrowserModule,
 GramModule   //这里改变了
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

此时,就能够在app.component.html应用HeaderComponent组件了:

<app-header></app-header>

ng-packagr

ng-packagr能够将ng我的项目编译并打包成一个umd标准的library,以便能够被其它的ng我的项目所应用。

5、装置ng-packagr:

npm install ng-packagr --save-dev 

在我的项目根目录下增加两个文件 ng-package.json 和 public_api.ts。

ng-package.json内容:

{
 "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
 "lib": {
 "entryFile": "public_api.ts"
 }
}

在public_api.ts中导出header.module.ts:

export * from './src/app/modules/header/header.module'

在package.json文件中增加packagr脚本命令,并将private属性设置为false:

"scripts": {
 "ng": "ng",
 "start": "ng serve",
 "build": "ng build",
 "test": "ng test",
 "lint": "ng lint",
 "e2e": "ng e2e",
 "packagr": "ng-packagr -p ng-package.json"
},
"private": false

删除掉dependencies没有应用的依赖

7、运行packagr脚本命令

npm run packagr

完结后会生成一个dist文件夹,就是咱们须要的library包了。还能够进一步将dist打包成tgz文件:

cd dist
npm pack

dist文件夹里就会多出一个ng-packagr-test-0.0.0.tgz,名称和版本号均取自package.json。

自此,咱们就能够通过磁盘相对路径来装置本人的library了,如:

npm install ../../program-name/dist/gram-angular2-0.0.0.tgz  

8、通过本人的npm账号公布到npmjs,前提是确保包名是惟一的:

npm publish dist

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据