Ստեղծեք գրադարան Angular-ով և հրապարակեք այն GitHub փաթեթի ռեեստրում

Ինչպես կարգավորել Angular գրադարանի նախագիծը, փաթեթավորել այն տեղադրվող փաթեթի մեջ, հրապարակել այն GitHub Package Registry-ում և օգտագործել այն մեկ այլ նախագծում:

Ներածություն

Այս գրառմանը կներկայացվեն միայն այն կարևոր քայլերը, որոնք ինձ որոշ ժամանակ պահանջեցին ճիշտն անելու համար: Ես կփորձեմ հնարավորինս հակիրճ լինել, բայց դեռ բավականաչափ մանրամասներ կներկայացնեմ՝ ամեն ինչ հեշտացնելու համար:

Եթե ​​որոշ ժամանակ առաջ չգիտեիք, GitHub-ը հայտարարեց իր սեփական Փաթեթի ռեգիստրը, որը այս հոդվածը գրելու պահին բետա է: Կան մի քանի պատճառ, թե ինչու ես կարծում եմ, որ GitHub փաթեթի ռեեստրը (GPR) հիանալի նորություն է մշակողների համար.

• երբ հրապարակում եք GPR-ում, դուք հրապարակում եք հայտնի/ընտրված GitHub պահեստում. այդ կերպ ձեր փաթեթները գտնվում են իրենց ծածկագրի/իրականացման կողքին.
• դուք կարող եք հրապարակել տարբեր փաթեթներ նույն պահեստում, այսինքն՝ պարտադիր չէ, որ այն լինի մեկ ռեպո = մեկ փաթեթ (ուղղակի պետք է այն ճիշտ կարգավորել, և ես ձեզ ցույց կտամ, թե ինչպես դա անել ավելի ուշ);
• դուք կարող եք վերօգտագործել ձեր գոյություն ունեցող թիմը/կազմակերպության կառուցվածքը, որը դուք ունեք GitHub-ում, ստիպված չլինելով կրկնել ամեն ինչ NPM-ում (կամ որևէ այլ ռեգիստրում, այդ դեպքում);
• Անձամբ ինձ երբեք դուր չի եկել NPM-ի փորձը, լինի դա նրանց որոնումը, թե վարչարարական կողմը, և շատ ավելի շուտ կցանկանայի ունենալ ամեն ինչ GitHub-ում,
• GitHub-ի օգտագործումը և՛ ծածկագիրը, և՛ փաթեթները հյուրընկալելու համար պարզապես նշանակում է մեկ (կամ ավելի) պակաս ծառայություն, որը դուք պետք է կազմաձևեք և սովորեք օգտագործել,
• ծանոթ GitHub փորձը,
• GPR-ը ներկայումս գտնվում է Beta-ում, և այն կարող եք անվճար օգտագործել նույնիսկ մասնավոր փաթեթների համար. Գրելու պահին ես չգիտեմ որևէ այլ առցանց փաթեթի ռեգիստր, որտեղ կարելի է անվճար հյուրընկալել մասնավոր փաթեթներ,
• Դուք կարող եք նաև օգտագործել GitHub-ի ռեեստրը այլ տեսակի փաթեթների համար, օրինակ՝ Gem (Ruby), NuGet (.NET), Maven (Java) և այլն:

Իմացեք ավելին GitHub փաթեթի ռեեստրի մասին և եթե ցանկանում եք գրանցվել Beta-ին, խնդրում ենք օգտագործել այս հղումը

Եկ սկսենք

1. Ստեղծեք դատարկ Angular աշխատանքային տարածք

Դրա համար մենք կօգտագործենք Angular CLI: Angular-ի վերջին տարբերակներում փոփոխություններ են կատարվել, որոնք դա շատ հեշտ են դարձնում:

Ստեղծեք դատարկ Angular աշխատանքային տարածք, որը կարող է հյուրընկալել բազմաթիվ նախագծեր: Սա ամեն ինչ կկարգավորի ճիշտ կոնֆիգուրացիայով package.jsonև angular.json-ում

ng new LibraryWorkspace -createApplication=false

2. Ստեղծեք նոր Angular գրադարանի նախագիծ աշխատանքային տարածքում

Սա աշխատանքային տարածքի արմատի տակ կստեղծի /projects թղթապանակ՝ ներսում գրադարանի ենթաթղթապանակով: Այն նաև կստեղծի գրադարանի նոր մոդուլ և ծառայություն և բաղադրիչ՝ սկսելու համար:

ng g library ComponentsLib -prefix cmpts

3. (ըստ ցանկության) Կառուցեք (և փաթեթավորեք ձեր գրադարանը)

Քայլ 3-ն այստեղ պահանջվում է միայն որպես նախազգուշական միջոց: Գրադարանի կառուցումն այս պահին ապահովում է, որ մեր անկյունային աշխատանքային տարածքը և գրադարանի նախագիծը ճիշտ են ստեղծվել CLI-ի կողմից: Դուք նորից կվերակառուցեք գրադարանը 4–7 քայլերն ավարտելուց հետո:

Այժմ, նախորդ CLI հրամանը նաև կստեղծի ֆայլեր, որոնք անհրաժեշտ են, որպեսզի նախագիծը ինչ-որ պահի փաթեթ դառնա.

• package.json
• ng-package.json
• և կարևոր ֆայլ src/public-api.ts

Այս պահին մենք ունենք այն ամենը, ինչ մեզ անհրաժեշտ է այս նախագծի համար կառուցելու համար:

CLI-ն բավականաչափ խելացի է, որպեսզի նախ կառուցի լռելյայն գրադարանը, եթե դուք նաև այլ նախագծեր ունեք աշխատանքային տարածքում: Այն նաև լռելյայն կստեղծվի արտադրության համար, այնպես որ դուք ստիպված չեք լինի օգտագործել -prodանջատիչը:

ng build

Գրադարանը փաթեթավորելու համար դուք կանցնեք distթղթապանակին և կօգտագործեք npm pack: Դուք կարող եք դա անել հիմա ԿԱՄ անել ավելի ուշ, երբ կարգավորեք GitHub փաթեթի ռեեստրի կարգավորումները (քայլեր 4–7):

cd ..\..\dist\ComponentsLib\
npm pack

Դուք, իհարկե, կարող եք այս տողերը դարձնել custom script-ի մի մասը package.json-ում, բայց ես չեմ մանրամասնի դրա մասին:

4. Գրանցվեք GitHub փաթեթի ռեեստրում

Սա շատ պարզ է, ուղղակի գրանցվեք GPR բետա-ի համար, և դուք պետք է լավ լինեք:

5. Նույնականացրե՛ք GitHub-ում՝ օգտագործելով անձնական նշան և պահե՛ք այն ձեր անձնական .npmrc ֆայլում

Երբ ես դա արեցի առաջին անգամ, ես խնդիրներ ունեի ինչպես .npmrcfile-ի հետ, որը չի պարունակում այն, ինչ ես ուզում էի, այնպես էլ առաջին հերթին cmdline-ից GitHub մուտք գործելու հետ: Խնդրում ենք, ժամանակ տրամադրեք և մի քանի անգամ փորձեք, եթե առաջին անգամ չաշխատի:

Նախ, ձեզ անհրաժեշտ է նշան GitHub-ից, և դուք կարող եք այն ստանալ՝ հետևելով այստեղ նկարագրված քայլերին https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token- հրամանի տողի համար

Երբ դուք ունեք նշան, բացեք ձեր cmdline/powershell/whatever և արեք սա

npm login — scope=@OWNER — registry=https://npm.pkg.github.com

@OWNER-ը փաթեթի շրջանակն է, և դուք պետք է օգտագործեք կամ ձեր GitHub հաշվի անունը կամ ձեր GitHub կազմակերպության անունը այստեղ (նախածանցով @ նշանով):

Հետևեք cmdline-ում ներկայացված քայլերին և մուտք գործեք GitHub ձեր նշանով:

Հաջող մուտքը կստեղծի .npmrcfile ձեր ամբողջ մեքենայական անձնական թղթապանակում (Windows-ում սա կլինի C:\Users\accountname\\.npmrc):

Եթե ​​դուք բացեք այս ֆայլը, դուք պետք է գտնեք դրանում հետևյալ տողերը. Եթե ​​երկու տողերը չկան, պարզապես ավելացրեք դրանք ինքներդ:

//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN_HERE
@OWNER:registry=<https://npm.pkg.github.com/>

Նորից @OWNERկփոխարինվի ձեր GitHub օգտանունով կամ կազմակերպության անունով (նախածանցով @ նշանով):

6. Փոփոխեք ձեր գրադարանի ֆայլերը

Ձեր գրադարանի կոդի որոշ ֆայլեր պետք է փոփոխվեն GitHub-ի հատուկ NPM կարգավորումներով/կոնֆիգուրացիաներով:

Փոփոխեք ձեր ./projects/ComponentsLib/package.jsonայսպես

(դա package.jsonն է գրադարանի թղթապանակում ձեր Angular աշխատանքային տարածքում, ՈՉ թե ձեր աշխատանքային տարածքի սկզբում)

փոփոխություն

“name”: “ComponentsLib”,

to

“name”: “@owner/ComponentsLib”,

(@owner-ը նույնն է, ինչ քայլ 5-ում, բայց այստեղ պետք է լինի փոքրատառ:)

և ավելացրեք հետևյալ տողերը

“repository”: {
  “type”: “git”,
  “url”: “git://github.com/OWNER/REPOSITORY.git”
}

Երբ ավարտեք, ձեր package.jsonն այսպիսի տեսք պետք է ունենա

{
  “name”: “@owner/ComponentsLib”,
  “version”: “0.0.1”,
  “peerDependencies”: {
    “@angular/common”: “8.2.13”,
    “@angular/core”: “8.2.13”
  },
  “repository”: {
    “type”: “git”,
    “url”: “git://github.com/OWNER/REPOSITORY.git”
  }
}

7. Ստեղծեք .npmrc ֆայլ ձեր գրադարանի թղթապանակում

Այս ֆայլն անհրաժեշտ է npm-ին՝ ձեր GitHub ռեգիստրը հայտնաբերելու և npmին իմանալու համար, թե որտեղ պետք է հրապարակել ձեր փաթեթը, երբ դուք գործարկեք npm publish-ը ավելի ուշ: Դուք կարող եք նաև ստուգել այս ֆայլը աղբյուրի կառավարման մեջ:

Ստեղծեք նոր .npmrc ֆայլ package.json-ի կողքին և դրան ավելացրեք այս տողը.

registry=https://npm.pkg.github.com/owner

Եթե ​​դուք նախատեսում եք ունենալ փաթեթներ, որոնք պատկանում են մի քանի մշակողների կամ տարբեր կազմակերպությունների միևնույն Angular նախագծի շրջանակներում, կարող եք աջակցել բազմաթիվ շրջանակների՝ ավելացնելով գրանցամատյանները հետևյալ ձևաչափով .npmrc-ում.

@owner:registry=https://npm.pkg.github.com

8. Կառուցեք և փաթեթավորեք ձեր գրադարանը

Փոփոխված բոլոր ֆայլերի դեպքում այժմ կարող եք կառուցել գրադարանը և փաթեթ ստեղծել դրա համար

ng build
cd ..\..\dist\ComponentsLib\
npm pack

Սա պետք է հանգեցնի նրան, որ ձեր dist պանակում ստեղծվի tarball

owner-componentslib-0.0.1.tgz

9. Հրապարակեք գրադարանային փաթեթը GitHub-ում

Այժմ դուք պետք է կարողանաք փաթեթը հրապարակել GitHub պահեստում, որը կազմաձևել եք package.json-ում

npm պահանջում է, որ դուք դեռ մուտք եք գործել GitHub, որպեսզի դա աշխատի

npm publish

10. Օգտագործեք հրապարակված փաթեթը մեկ այլ հավելվածում

Գնացեք ձեր GitHub պահոց և կտտացրեք փաթեթների հղմանը (պետք է լինի պարտավորությունների և ճյուղերի ներդիրների կողքին), և այն ձեզ կտանի դեպի այդ ռեպո հրապարակված փաթեթների ցանկը: Այն հասանելի կլինի նաև URL-ով

https://github.com/owner/repository/packages

Փաթեթի վրա սեղմելը ձեզ կտրամադրի այն տեղադրելու հրահանգները՝ կա՛մ npm i-ի միջոցով, կա՛մ ավելացնելով այն package.json-ին:

Այժմ, որպեսզի տեղադրումն աշխատի, նպատակակետ հավելվածին անհրաժեշտ կլինի նաև .npmrc ֆայլ, որպեսզի այն կարողանա գտնել ձեր GitHub ռեեստրը (եթե այն գրանցված չեք ձեր անձնական մեքենայական .npmrc ֆայլում):

Ձեր հավելվածի սկզբում (հավելվածը, որտեղ ցանկանում եք տեղադրել ձեր գրադարանային փաթեթը) ստեղծեք .npmrc ֆայլը հետևյալ բովանդակությամբ.

registry=https://npm.pkg.github.com/owner

Ի վերջո, դուք կարող եք բերել գրադարան

npm install @owner/componentslib

Այնուհետև դուք կներմուծեք ComponentsLibModule-ը ձեր նպատակակետ հավելվածի ձեր Angular մոդուլներից մեկին (լինի դա արմատային app.module կամ որևէ այլ մոդուլ):

11. Գրադարանի նոր տարբերակների հրատարակում

Երբ դուք փոփոխում եք ձեր գրադարանը և ցանկանում եք թարմացնել փաթեթը ավելի նոր տարբերակով, դուք պետք է թարմացնեք դրա տարբերակի (semver) համարը:

Դրա համար պարզապես կարող եք օգտագործել npm version հրամանը, և այն ավտոմատ կերպով կփոխանցի ձեր տարբերակի համարը:

npm version [patch | minor | major | …]

npm տարբերակի հրամանի փաստաթղթեր

Այնուհետև դուք կցանկանաք կրկնել կառուցման, փաթեթավորման և հրապարակման քայլը:

Ավարտել

Հուսով ենք, որ այս գրառումը կօգնի ուրիշներին ստեղծել GitHub-ը որպես իրենց փաթեթի ռեեստր և նպաստել մոդուլի/բաղադրիչի վերաօգտագործմանը մասնավոր կամ հանրային թիմերում:

Եթե ​​ունեք հարցեր կամ մեկնաբանություններ, ազատ զգալ դրանք տեղադրեք ստորև:

Նաև, ահա հղումների ցանկը, որոնք օգնեցին ինձ, մինչ ես պայքարում էի սա կարգավորելու առաջին անգամ.

Գրադարան ստեղծելու հիանալի շարքը Թոդ Փալմերի կողմից

GitHub փաթեթի ռեեստրի մասին

NPM-ի կարգավորում GitHub-ի կողմից GitHub փաթեթի ռեեստրի հետ օգտագործելու համար

Հրամանատարի տողի համար անձնական մուտքի նշանի ստեղծում

Ձեր ռեեստրի կարգավորումները որպես npm Enterprise օգտվողի կարգավորում

HTH