angular5.0封裝underscore常用pipe併發布到npm全套流程

楊明明發表於2018-04-03
Angular封裝NPM

專案背景

今天心血來潮，以前不常寫東西，接觸angular以來，覺得有必要分享一些新的體會了，於是來到了這裡。

  • 管道Pipe可以將資料作為輸入，然後按照規則將其轉換並輸出。

建立專案

ng new meepo-underscore
cd meepo-underscore
複製程式碼

建立module和初始化pipe

ng g m meepo-underscore
ng g pipe map
ng g pipe flatten
ng g pipe invert
ng g pipe range
ng g pipe sample
ng g pipe shuffle
ng g pipe values
複製程式碼

分析需求及實現

  • map 結構轉陣列

meepo-underscore/map.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";
import * as _ from "underscore";
@Pipe({
  name: "map"
})
export class MapPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    let re = _.map(value, (item, key) => {
      return { item: item, key: key };
    });
    return re;
  }
}
複製程式碼
  • 使用
let obj = {
    name: "bob",
    school: "school",
    address: "xueyuan"
}
複製程式碼
<div *ngFor="let item of obj | map">
    {{item.key}}:{{item.item}}
</div>
複製程式碼
  • flatten 接收一個Array，無論這個Array裡面巢狀了多少個Array，flatten()最後都把它們變成一個一維陣列

meepo-underscore/flatten.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";
import * as _ from "underscore";

@Pipe({
  name: "flatten"
})
export class FlattenPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return _.flatten(value);
  }
}
複製程式碼
  • 使用
<div *ngFor="let item of [[1],[2],[3,4,5]] | flatten">
    {{item.key}}:{{item.item}}
</div>
複製程式碼
  • invert 把object的每個key-value來個交換，key變成value，value變成key
import { Pipe, PipeTransform } from '@angular/core';
import * as _ from "underscore";

@Pipe({
  name: 'invert'
})
export class InvertPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return _.invert(value);
  }
}
複製程式碼
  • 使用
<div *ngFor="let item of [{key1:'item1'},{key2:'item2'}] | invert | map">
    {{item.key}}:{{item.item}}
</div>
複製程式碼
  • range 區間陣列
import { Pipe, PipeTransform } from "@angular/core";
import * as _ from "underscore";

@Pipe({
  name: "range"
})
export class RangePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return _.range(value, args);
  }
}
複製程式碼
  • 使用
<div *ngFor="let item of 0 | range:10">
    {{item}}
</div>
複製程式碼
  • sample 隨機選擇一個或多個元素：
import { Pipe, PipeTransform } from "@angular/core";
import * as _ from "underscore";

@Pipe({
  name: "sample"
})
export class SamplePipe implements PipeTransform {
  transform(value: any, args?: any): any {
    let item = _.sample(value, args);
    return item;
  }
}

複製程式碼
  • 使用
<h2 class="title">_.sample</h2>
<div *ngFor="let item of obj | map | sample:4">
  {{item.item}}
</div>
複製程式碼
  • shuffle 用洗牌演算法隨機打亂一個集合
import { Pipe, PipeTransform } from '@angular/core';
import * as _ from "underscore";

@Pipe({
  name: 'shuffle'
})
export class ShufflePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return _.shuffle(value)
  }

}

複製程式碼
<h2 class="title">_.shuffle</h2>
<div *ngFor="let item of obj | map | shuffle">
  {{item.key}}-{{item.item}}
</div>
複製程式碼
  • values 物件值遍歷
import { Pipe, PipeTransform } from '@angular/core';
import * as _ from "underscore";

@Pipe({
  name: 'values'
})
export class ValuesPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return _.values(value);
  }

}

複製程式碼

釋出準備

新建package.json

{
    "name": "meepo-underscore",
    "version": "2.0.2",
    "repository": "https://github.com/meepobrother/meepo-underscore.git",
    "author": "imeepos <1037483576@qq.com>",
    "license": "MIT",
    "private": false,
    "scripts": {
        "git": "git add . && git commit -m 'push to save' && git push origin master"
    },
    "peerDependencies": {
        "@angular/core": "*",
        "@angular/common": "*",
        "rxjs": "*",
        "underscore": "*"
    },
    "ngPackage": {
        "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
        "dest": "../../../meepo/underscore",
        "workingDirectory": "./.ng_build",
        "lib": {
            "entryFile": "./public_api.ts"
        }
    }
}
複製程式碼

匯出模組

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { MapPipe } from "./map.pipe";
import { ShufflePipe } from "./shuffle.pipe";
import { SamplePipe } from "./sample.pipe";
import { RangePipe } from "./range.pipe";
import { FlattenPipe } from "./flatten.pipe";
import { ValuesPipe } from "./values.pipe";
import { InvertPipe } from "./invert.pipe";

export const PIPES = [
  MapPipe,
  ShufflePipe,
  SamplePipe,
  RangePipe,
  FlattenPipe,
  ValuesPipe,
  InvertPipe
];

@NgModule({
  imports: [CommonModule],
  declarations: [...PIPES],
  exports: [...PIPES]
})
export class UnderscoreModule {}

複製程式碼

釋出到npm

ng-packagr -p ./src/app/shared/underscore/package.json
複製程式碼

使用安裝

yarn add meepo-underscore
複製程式碼
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { UnderscoreModule } from 'meepo-underscore';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([]),
    UnderscoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

複製程式碼

總結

本文介紹了 Angular 自定義管道pipe的方法，併發布到npm, 方便使用及管理。

專案地址

相關文章