NPM üçün bir açısal kitabxana inkişaf etdirmək, istehlak etmək və nəşr etmək necədir ... amma bəzən buna dəyər deyil!

Angular, hər gün milyonlarla istifadəçiyə xidmət edən veb tətbiqetmələr yaratmaq üçün istifadə edilə bilən çox populyar və güclü bir JavaScript çərçivəsidir. Google-dan açıq mənbəli bir çərçivədir və hər kəs birlikdə işləyə bilər. Angular üçün NPM-də quraşdır və çalma kimi minlərlə paket var. Budur bu yazıda biz də birini edirik.

Bu məqaləni bir Bucaqlı Komponent Kitabxanasının inkişaf etdirilməsi üçün bir təlimat olaraq başlayacağıq, bir Angular CLI layihəsində istifadə edəcəyik və sonra NPM-də yayımlayacağıq. Bu addım-addım bir bələdçi olacaqdır.

Sonra eyni Bucaqlı Kitabxananı Açısal Boruya çeviririk və Boruların Modullar üzərindən nə vaxt istifadə ediləcəyini və boruların tətbiqetmə yükünü necə azalda biləcəyini daha dərindən araşdırırıq. Yalnız bu hissəni hədəf almaq istəyirsiniz? Məqalənin dörddə üçü üzrə gedin.

Borular, üçüncü tərəf kitabxanalarına nisbətən daha yüngüldür, çünki müştəri tərəfindəki JavaScript dəyəri səmərəsiz işlənsə çox yüksəkdir. Addy Osmani bunu son məqaləsində izah edir.

Bu məqalə iki əsas sahəni əhatə edir: bucaq komponentləri və bucaq boruları (və nə zaman istifadə ediləcək).

Bucaq komponentləri üçün kitabxana

Çox sayda insanın oxunaqlı formatında formatlaşdıran kiçik bir komponent kitabxanası yaradacağıq. Nümunə: Mövcud göstəricilər göstərir ki, Twitter-də "55138719 izləyici" var və kitabxanamız onu "55.1 milyon izləyici" kimi formatlaşdırır. Bu daha asan və istifadəçi dostu deyilmi? Bir neçə daha nümunə:

  • 37574 -> 37.5K
  • 1222130 -> 1.2 M.
  • 12414770 -> 12.4M
  • 19121364128 -> 19.1B

Layihənin qurulması

Angular CLI'yi inkişafımız üçün əsas olaraq istifadə edəcəyik, çünki Github'dan açısal Reponu klonlamaqdan daha əlverişlidir. Bundan əlavə, iskele və modulların, komponentlərin və boruların avtomatik istehsalından faydalanırıq. * Daha sonra komponentlərimizi və borularımızı inkişaf etdirmək üçün eyni layihədən istifadə edəcəyik və kitabxanamızı sınamaq üçün bir sandbox kimi istifadə edəcəyik.

CLI-nin qlobal quraşdırılması ilə başlayaq və sonra layihəyə başlayaq.

npm quraşdırma @ angular / cli -g
ng yeni formatlayıcı

Layihənin əsas quruluşuna sahib olduqdan sonra "ng-number-formatter" layihə qovluğuna gedib layihəni idarə edə bilərik.

ng serve // ​​`localhost: 4200`-ə gedin

Kitabxana üçün modulları / komponentləri başlatın

İndi ən sadə Açısal tətbiqetməmiz işlədiyinə görə, rəqəmləri insan tərəfindən oxunaqlı formatda formatlaşdırmaq üçün xüsusi modullarımızı və komponentlərimizi əlavə edək.

ng modul modulları / ng sayı formatlayıcı yaradın
ng komponent modulları yaratmaq / ng-number-formatter

Bu avtomatik nəsil bucaq modullarının inkişafı üçün lazım olan sənədləri yaradır. Bizim vəziyyətimizdə, bu müstəqil modulları bir-birindən təcrid etmək istəyirik ki, bunları müstəqil Bucaqlı Kitabxanalar kimi ixrac edə bilək. MicroServices konsepsiyası kimi hər modulu bir-birindən ayırmaq da yaxşı təcrübədir.

Bucaqdakı modullar, komponentlərimizin Bucaqlı bir layihənin bir hissəsi olmasına kömək edən konfiqurasiya sənədləri kimi qəbul edilə bilər. Bu modullar tətbiqimizi həqiqətən məhsuldar edən və işlək vəziyyətə gətirən komponentlərə əsaslanır.

Sayı formatlama modulu

Bu modul faylı öz-özünə çap olunur və kitabxanamızın bəyannamələrini və ixracatını ehtiva edir.

@NgModule ({idxal: [CommonModule], izahatlar: [NgNumberFormatterComponent], ixrac: [NgNumberFormatterComponent]})

Sayı format şablonu

İndi app / modules / ng-format-formatter qovluğunda ng-number-formatter.component.html faylını açın və lazım olan HTML span etiketini əlavə edin. Stil üçün ng-number-formatter.component.css faylının məzmunu ilə işləyə bilərik, amma hələlik buna məhəl qoymayacağıq və işləri mümkün qədər sadə saxlayacağıq.

{{ngNumber}}

Burada ngNumber dəyişən əlaqəli ng-number-formatter.component.ts komponentində təyin olunur. Nömrəni bir ana komponentdən bir sətir formatında aldığımız üçün (bizim vəziyyətimizdə app.component.ts olardı - bu komponentlərin necə əlaqəli olduğunu göstərəcəyik), bu rəqəmi ng nömrəmizlə formatlaşdıracağıq- insanın oxunaqlı formatında formatter.component.ts. Sonra onu bir aralıq etiket əlavə etdiyimiz HTML şablonu üzərində göstərəcəyik.

Sayı formatlaşdırma komponenti

Ng-number-formatter.component.ts faylını eyni qovluq tətbiqində / modules / ng-number-formatter-də açın. Komponent üçün əsas kodun artıq yerində olduğunu görə bilərsiniz. Yenicə dəyişdirdiyimiz şablon artıq komponentimizdə birləşdirilmişdir.

@Component ({Selector: 'ng-number-formatter', girişlər: ['ngNumber'], templateUrl: './ng-number-formatter.component.html', styleUrls: ['./ng-number-formatter. komponent.css ']})

Seçici: 'ng-number-formatter' kitabxanamızın istehlakçıları olaraq komponentimizə müraciət etməli olduğumuz istifadəçi tərəfindən müəyyən edilmiş bir etiketdir. Sonra girişlər: ['ngNumber'] iki kontekstdədir.

"Ng-sayı formatlayıcı komponentimizdə" (adlanan tərəf) daxil olan nömrə ardıcıllığını qəbul edən bir dəyişən kimi qəbul edilir. Digər tərəfdən, app.component.ts-də (zəng edən) bu, seçicimizə dəyəri göndərən bir xüsusiyyət kimi qəbul edilir.

Sonra templateUrl: '.ng-number-formatter.component.html' və styleUrls: '.ng-number-formatter.component.css' şablonu birləşdirir.

Sənədi lazımi sayda dönüşüm məntiqi ilə yeniləyin. Sonra şablonumuzun ayrı bir sənəddə olmasına ehtiyac yoxdur. Beləliklə, bunu sildik və birbaşa şablon olaraq tərkibimizə yerləşdirə bilərik : ' {{ngNumber}} '. Aşağıdakı icmalda komponentimizin tam məzmunu göstərilir. Etdiyiniz dəyişiklikləri müqayisə edin və növbəti addımlara keçin.

Bucaq komponentləri üçün kitabxananı istehlak edin

Bucaqlı Kitabxanadan istifadə etmək üçün əvvəlcə modulda istinad edilməli və sonra şablonda Selector-ng-sayı formatlaşdırıcıdan (komponentimizin Seçici nişanında göstərildiyi kimi) istifadə edilməlidir.

Üçüncü tərəf kitabxanasının bir layihədə istifadə edildiyi və sandbox kimi istifadə edildiyi zaman yalnız bir fərq var.

1. Kitabxanamız hələ nəşr olunmadığından və NPM qovluğunda göstərilmədiyindən modul daxilində istinad üçün onun tam yoluna ehtiyacımız var.

'./modules/ng-number-formatter/ng-number-formatter.module'dan {NgNumberFormatterModule} idxal edin;

2. Kitabxanamız nəşr olunduqda və NPM qovluğunda göstərildikdə, daha asan bir müraciət olacaqdır. Bunun kimi:

{NgNumberFormatterModule} 'ng-number-formatter' dən idxal etmək;

Budur yeni kitabxanamızı istifadə etmək üçün xüsusi etiketimiz:

 
// "1.2M" formatındakı nəticə nömrəsi daha rahatdır

Paketleyin və NPM-də yayımlayın

İndi sandbox layihəsi çərçivəsində müstəqil modulumuzu hazırladıq və sınaqdan keçirdik. Birincisi, yaxşısı budur ki, bu modul o qədər sadə və minimaldır ki, başqa heç bir asılılığı yoxdur. İkincisi, yaxşıdır ki, modulumuz tamamilə təcrid olunmuşdur və sandboxdakı komponentə asanlıqla qoşula bilər, beləliklə ayrıca paketlənə və ayrıca nəşr oluna bilər.

Növbəti addım, onu dünyaya təqdim etməkdir ki, başqaları onu yükləyə və bucaq tətbiqlərindəki nömrələri formatlaşdırmaq üçün istifadə edə bilsin.

Nömrə formatlaşdırma modulumuzun qablaşdırılmasına və nəşrinə başlamaq üçün bu modulu NPM paketi kimi müəyyən edilə bilən bir kitabxanaya çevirəcək bir qablaşdırıcıya ehtiyacımız var. Bunun üçün kitabxanalarınızı Açısal Paket formatına çevirən "ng-packagr" seçirik. Bu "toplama" yolu ilə bir bükücü olaraq yaradılan bir NPM paketidir və kitabxanalarda və tətbiqlərdə kod tərtib edən bir modul paketidir.

İndi sandbox layihəmizin bir hissəsi olaraq paketleyicimizi quraşdıraraq inkişaf prosesimizə davam edək. Modulu yalnız NPMjs.com ilə müəyyənləşdirilə bilən bir kitabxana kimi tərtib etməyimiz lazım olduğundan inkişafdan asılılıq olaraq xilas edəcəyik.

npm quraşdırma ng-packagr --save-dev

Növbəti addım, layihə qovluğumuza ng-pack.json və public_api.ts olan iki faylı əl ilə əlavə etməkdir.

ng-pack.json ng-packgr konfiqurasiya edir və qablaşdırma üçün hazırlamaq üçün public_api.ts faylını göstərir. Məzmunu budur:

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

public_api.ts, bu yaxınlarda inkişaf etdirilmiş bucaq modulunun ixrac etdiyi tək sətir faylıdır.

'./src/app/modules/ng-number-formatter/ng-number-formatter.module' adresindən ixrac *.

İki fayl yaranan kimi ng-packagr əmrini tətbiq layihəmizin pack.json faylına qeyd edirik və NPM qovluğu üçün "private": false xüsusiyyətini dəyişdiririk. Yayımlamağa davam etmək üçün sənədlərinizi yeniləyin.

"Scripts": {"ng": "ng", "start": "ng service", "build": "ng build", "test": "ng test", "lint": "ng lint", " e2e ":" ng e2e "," packagr ":" ng-packagr -p ng-pack.json "}," private ": səhv

Ng-packagr-ı bir əmr kimi qeyd etdikdən sonra NPM Kataloqu üçün görünən bir paket olaraq modulumuzu daha da paketləyə bilərik. Bu, TypeScript əsaslı modulumuzu dist qovluğundakı JavaScript-ə tərtib edəcəkdir. Sonra dist qovluğuna gedəcəyik və bağımsız bir komponent kitabxanası olaraq son qablaşdırmanı edəcəyik.

npm run packagr
CD dist
npm paketi

Yerli kompüterinizdə hamısı budur - indi bunu ictimailəşdirmə vaxtı gəldi. Bunun üçün https://www.npmjs.com/ bir hesaba ehtiyacımız var. Kitabxanamızı ictimaiyyətə təqdim etmək üçün daxil olun və son iki əmri işə salın .

Terminal / Command Line Tool vasitəsi ilə NPM-ə daxil olun:

npm giriş

NPM-də dərc edin:

Npm dərc edin

Voillllàaaaaaaaaaaaaaaaaaaaaaa !!!

Paketiniz, əlimdəki kimi, əlçatandır. :)

Digər istifadəçilər layihələrinizdə kitabxananızdan necə istifadə edirlər

Bu, Sandbox layihəmizdəki app.component.ts sənədimizdəki kimi edilir, amma əslində bir az daha sadədir. Bizə sadəcə adlarına istinad edən ən sadə modula ehtiyac var. Aşağıdakı üç addım bir-birinin ardınca aparılmalıdır: quraşdırma, seçicidən istifadə edərək modulu idxal etmək.

// quraşdırma npm yüklə ng-number-formatter - saxla
// {BrowserModule} modulunu '@ angle / platform-browser' dən idxal edin; {NgModule} '@ açı / nüvədən' idxal edin;
{AppComponent} './app.component' içərisindən idxal et; {NgNumberFormatterModule} 'ng-number-formatter' dən idxal etmək;
@NgModule ({Açıqlamalar: [AppComponent], idxal: [BrowserModule, NgNumberFormatterModule], təminatçı: [], Bootstrap: [AppComponent]})
AppModule sinifini ixrac edin {}
// seçici

Əlavə məlumatı "ng-number-formatter" paketindəki NPM qovluğunda tapa bilərsiniz!

Və Github'dakı "sandbox project" dəki kod!

Dirsək boruları və alternativ olaraq nə vaxt istifadə ediləcəyi

Hər şeyi etdikdən sonra məqalənin ikinci hissəsinə keçək. Əvvəlcə bucaq tətbiqlərindəki boru ehtiyacını araşdıracağıq və sonra NG Sayı Formatlayıcı Kitabxanasını Sayı Formatlaşdırma Borusuna çevirəcəyik.

| Klaviaturadakı Enter düyməsinin yanında simvol

Boru nədir? Boru sadə bir təmsilçilikdir “| ”Bucaq tətbiqində bir modulun təqdim edilməsində. Borular ümumiyyətlə sadə tapşırıqlar üçün nəzərdə tutulmuşdur: ən çox yayılmış zaman damğalarını və ya Unix versiyasının tarixini gün / ay / il formatında insan tərəfindən oxunaqlı bir tarixə formatlaşdırmaqdır. Aşağıdakı kimi:

1533679976 08.08.2018 qədər 1533679976 Salı, 07.08.2018

Bu HTML etiketində edilir. Misal üçün:

{{1533679976 | Tarix}}

Ayırıcı “| “Bucağı ekranda göstərmədən əvvəl span etiketinin daxili HTML-sini şərh etməyə məcbur edir.

Borular, JavaScript qiymətinə görə müəyyən ssenarilərdə modullardan daha çox seçilir. Bu xərclər yaddaş ölçüsü, yükləmə vaxtı, gecikmə, əşyaların göstərilmə vaxtı və səhifənin interaktiv fəaliyyətə başlamazdan əvvəl çəkdiyi vaxtla əlaqədardır. Bunlar JavaScript-lə sıx bir veb tətbiq / veb sayt üçün nəzərdən keçirilməli bir neçə məqamdır.

Üçüncü tərəf kitabxanaları, tətbiqinizi çökdürə biləcək onlarla digər asılılıq (məsələn, digər kitabxanalara əsaslanan kitabxanalar) ilə çox böyük ola bilər. Bu, Google axtarış reytinqlərinizi də təsir edə bilər, çünki səhifə yüklənməsi hələ də Google Axtarışdakı axtarış indeksinizi hesablamaqda ən vacib göstəricilərdən biridir.

Ng-Sayı-Formatter kitabxanası kontekstində kitabxana onsuz da sıxılmışdır və xarici asılılıq olmadan minimal formada mövcuddur. Buna görə alternativ bir borunuz varsa, sabit diskdə demək olar ki, eyni ölçüdədir. Npm install ng-number-formatter --save istifadə etdiyiniz layihə qovluğuna gedib node_modules qovluğundakı kitab qutusunun sandbox test mühiti daxil olmaqla ümumi ölçüsünün 70KB olduğunu yoxlaya bilərsiniz.

Həqiqi Bucaqlı Sayı Formatlaşdırma Borusu təliminə başlamazdan əvvəl, üçüncü bir əlavə və ya plagin seçmədən əvvəl asılılıqlarınızı hərtərəfli anlamalı olduğunuzu qeyd etmək istərdik. Sonra onları layihənizə daxil etdikdə, buna görə plan qura bilərsiniz.

Bir çox asılı paketi olan NPM paketi bir növ yükdür. şəkil

Açısal Sayı Formatlayıcı Boru

Bundan sonra hamımız bir bucaq tətbiqinin ardıcıllığını bilirik. Beləliklə, bu son hissə, terminal əmrləri və Bucaqlı Sayı Formatlaşdırma borusu üçün tələb olunan minimum kod ilə hiyləgər bir vərəq kimi mövzunun yalnız bir icmaldır!

Boruların yaradılması üçün iskele əmri ilə başlayacağıq, sonra yeni yaradılan borumuzu qeyd edib ana komponentə idxal edəcəyik. Axı onu şablonumuzda istifadə edəcəyik. * buradan ... tətbiqetmə kifayət qədər mənalıdır. Aşağıdan yuxarıya, altüst olmaq!

// boru kəməri yaradın boru kəmərləri yaradın / açısal say formatlayıcısı
// {BrowserModule} moduluna idxal '@ angle / platform-browser' -dən idxal; {NgModule} '@ açı / nüvədən' idxal edin; {AppComponent} './app.component' içərisindən idxal et; './pipes/angular-number-formatter.pipe' dən {AngularNumberFormatterPipe} idxal edin; @NgModule ({Açıklamalar: [AppComponent, AngularNumberFormatterPipe], idxal: [BrowserModule], provayder: [], Bootstrap: [AppComponent]}) AppModule sinifini ixrac edin {}

və nəhayət şablonda rəqəm formatlaşdırma borusundan istifadə edin:

{{1533679976 | angularNumberFormatter}}

Hamısı bu maddə üçün! Ümid edirəm ki, bunlar cəmiyyət üçün onlarla kitabxana və tonlarla boru çap etməyə imkan verir.

Əşyaların İnterneti və Sənaye 4.0 birləşməsi haqqında daha çox öyrənmək istərdinizmi? Budur magistr dissertasiyamdan bir hissə https://medium.com/coinmonks/micro-services-pipeline-for-an-industrial-internet-of-things-a8cdd67f1eb9. Apache Kafkadan Mesaj Kuyruğu, Apache Spark-dan Axın Mühərriki və MongoDB-dən Data Gölü əsasında mikro xidmət boru kəmərinin bir tətbiqidir. Oxuyun!
Məni @ ok_ansari tapa / izləyə bilərsiniz. Salam olsun, Ömər Kalim Ənsari