Як опублікувати JavaScript NPM пакет

Всі хто пра­цює з JS 99 від­со­тків кори­сту­ю­ться NPM. Але не всі зна­ють як опу­блі­ку­ва­ти вла­сний пакет. Це не складно.

---

Спо­ча­тку тро­шки питань та відповідей:

Що дає публі­ка­ція паке­та в NPM? Ваш код буде досту­пен всьо­му сві­ту, будь хто змо­же може кори­сту­ва­ти­ся вашою бібліо­те­кою, вико­нав­ши про­сту NPM команду.

Що пред­став­ляє з себе NPM пакет? Це гру­па чи дире­кто­рія фай­лів (пере­ва­жно JS), роз­та­шо­ва­на на сер­ве­рах NPM під задан­ним ім’ям. В пакет можно кла­сти фай­ли дозвіль­но­го типу. Мабуть дру­гим за вжи­ва­ні­стю типом фай­лу є CSS. Можно кла­сти: гра­фі­ку, відео та будь які інші формати.

Чи потрі­бно для публі­ка­ції паке­та мати акка­унт на Github? Зов­сім ні. Єди­не що потрі­бно – мати ака­унт на сай­ті NPM.

Який макси­маль­ний роз­мір NPM паке­та? Швид­кий пошук дав таку від­по­відь: макси­маль­но­го роз­мі­ру паке­та не вста­нов­ле­но, але при від­прав­ці вели­ких паке­тів може спра­цю­ва­ти тайма­ут. Тайма­ут можно під­ви­щі­ти дода­ва­н­ням до коман­ди публі­ка­ції -timeout=9999999.

Як ще можно діста­ти­ся до NPM паке­та, окрім його вста­нов­ле­н­ня? Є декіль­ка гло­баль­них CDN, котрі про­по­ну­ють доступ до ваших (і не тіль­ки) NPM паке­тів. Най­по­ши­ре­ні­ші: unpkg​.com та jsdelivr​.com. Вони дають можли­вість діста­ти­ся до фай­лів паке­ту за спе­ці­аль­но сфор­мо­ва­ним URL, а ще при­швид­шу­ють доступ до кон­тен­ту. У jsDelivr є ще одна дуже поту­жна фун­кція – це доступ до фай­лів у Guthub через URL.

Під­го­тов­ка до публі­ка­ції в NPM

Спо­ча­тку тре­ба пере­ко­на­ти­ся що у вас є NPM акка­унт та локаль­но вста­нов­ле­но остан­ню вер­сію NPM.

Заре­є­стру­ва­ти новий акка­унт ви може­те на сай­ті NPM. Зараз NPM вима­гає дво­фа­ктор­ну аутен­ти­фі­ка­цю через додаток.

Насту­пним кро­ком тре­ба пере­ко­на­ти­ся що ви має­те NPM вста­нов­ле­ним у вашій опе­ра­цій­ній систе­мі, для цьо­го від­крий­те Тер­мі­нал та вве­діть насту­пну команду:

npm -v

У від­по­відь ви повин­ні отри­ма­ти вер­сію NPM:

9.8.1

Якщо ви отри­ма­ли інфор­ма­цію про те що коман­да від­су­тня, то ви може­те вста­но­ви­ти NPM разом з NodeJS за посиланням:

Download | Node.js nodejs.org

Якщо ви отри­ма­ли інфор­ма­цію про вер­сію NPM, то можно або про­дов­жи­ти вико­ри­сто­ву­ва­ти її, або оно­ви­ти­ся до останньої.

Щоб оно­ви­ти NPM до остан­ньої вер­сії вико­ри­сто­вуй­те насту­пну команду:

npm install -g npm@latest

Після цих кро­ків ви повин­ні мати вста­нов­ле­ний NPM.

Під­го­тов­ка NPM пакета

Щоб під­го­ту­ва­ти пакет спер­шу тре­ба під­го­ту­ва­ти дире­кто­рію. Для цьо­го в Тер­мі­на­лі ство­ріть нову дире­кто­рію та пере­йдіть в середену:

mkdir my—fresh-package
cd ./my-fresh-package

Далі потрі­бно іні­ці­а­лі­зу­ва­ти пакет (ство­ри­ти package.json) для цьо­го все­ре­де­ні дире­кто­рії вико­ну­є­мо насту­пну команду:

npm init

Вас запи­та­ють мета-інфор­ма­цію про пакет, таку як опис, ім’я та емейл авто­ра і т.і. Можно скі­па­ти шаги, нати­ска­ю­чи Enter.

Після опи­са­них кро­ків у вас пови­нен з’я­ви­ти­ся файл package.json, який є ман­фі­е­стом паке­та, котрий окрім мета-інфор­ма­ції може мати поси­ла­н­ня ні інші пакети.

Покла­діть в дире­кто­рію файл index.js, та додай­те в ньо­го одну строчку:

alert('Hello there!')

Вхід в NPM з кон­со­лі чи терміналу

Для публі­ка­ції пакта тре­ба увійти в NPM з Тер­мі­на­лу. Для цьо­го вве­діть команду:

npm login

Для вас згне­ре­у­є­ться поси­ла­н­ня яке необ­хі­дно від­кри­ти в бра­у­зе­рі, поси­ла­н­ня вигля­дає при­бли­зно так:

https://www.npmjs.com/login?next=...

Після про­хо­дже­н­ня авто­ри­за­ції в бра­у­зе­рі – вас авто­ма­ти­чно зало­гі­нить в Терміналі.

Публі­ка­ція паке­та в NPM

І тепер доста­тньо, зна­хо­дя­чись в дире­кто­рії паке­та, вве­сти команду:

npm publish

Після вам запро­по­ну­ють ще раз прой­ти дво­фа­ктро­ну аутен­ти­фі­ка­цію в браузері:

npm notice 
npm notice 📦  [email protected]
npm notice === Tarball Contents === 
npm notice 22B  index.js    
npm notice 212B package.json
npm notice === Tarball Details === 
npm notice name:          my-fresh-package                        
npm notice version:       1.0.0                                   
npm notice filename:      my-fresh-package-1.0.0.tgz              
npm notice package size:  287 B                                   
npm notice unpacked size: 234 B                                   
npm notice shasum:        4bf9ca8759988449c2b7b4bbfa582e91ca380802
npm notice integrity:     sha512-GHTgvIrZitkkC[...]lr92GUS0ZeCkw==
npm notice total files:   2                                       
npm notice 
npm notice Publishing to https://registry.npmjs.org/ with tag latest and default access
Authenticate your account at:
https://www.npmjs.com/auth/cli/...
Press ENTER to open in the browser...

І вже після цьо­го ваш пакет буде мит­тє­во опу­блі­ко­ва­ний, як резуль­тат ви отри­ма­є­те насту­пну інформацію:

+ [email protected]

Пере­вір­ка що NPM пакет опублікован

Щоб пере­ві­ри­ти чи NPM пакет існує – від­крий­те в бра­у­зе насту­пний URL:

https://cdn.jsdelivr.net/npm/my-fresh-package

Ви повин­ні поба­чи­ти вміст index.js файла:

/**
 * Skipped minification because the original files appears to be already minified.
 * Original file: /npm/[email protected]/index.js
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
alert('Hello there!')

Виснов­ки

Тепер ви докла­дно зна­є­те як публі­ку­ва­ти фай­ли в NPM, біль­ше того ви дізна­ли­ся від­по­віді на декіль­ка дода­тко­вих питань щодо роз­мі­ру паке­та та досту­пу до паке­та через CDN.

При­йшов час ство­ри­ти свій пер­ший NPM пакет!