Як апублікаваць кампанент Vue.js у NPM

Вы стварылі выдатны кампанент у Vue.js, які, на вашу думку, могуць выкарыстоўваць іншыя распрацоўшчыкі ў сваіх праектах. Як вы можаце падзяліцца ім з імі?

У гэтым артыкуле я збіраюся паказаць вам, як падрыхтаваць кампанент, каб яго можна было запакаваць у NPM і апублікаваць. Я выкарыстоўваю ўзорны праект і паказваю наступнае:

  • Пераканайцеся, што залежнасці не ўваходзяць у пакет
  • Выкарыстоўвайце Webpack, каб стварыць асобныя зборкі для аглядальніка і вузла
  • Стварыце убудова для аглядальніка
  • Важная канфігурацыя package.json
  • Апублікаваць у NPM
Заўвага: Гэты артыкул быў першапачаткова апублікаваны 31.07.2017 тут, у блогу распрацоўшчыкаў Vue.js.

Праект "Вучэбны гадзіннік"

Я стварыў гэты просты кампанент гадзінніка, які буду размяшчаць на NPM. Магчыма, гэта не самы круты кампанент, які вы калі-небудзь бачылі, але ён дастаткова добры для дэманстрацыі.

Вось файл кампанента. Тут няма нічога асаблівага, але звярніце ўвагу, што я імпартую бібліятэку момантаў для фарматавання часу. Важна выключыць залежнасці ад вашага пакета. Мы разгледзім гэта хутка.

Ключавы інструмент: Webpack

Большасць таго, што мне трэба зрабіць, каб падрыхтаваць гэты кампанент да NPM, робіцца з Webpack. Вось асноўная наладка вэб-пакета, якую я дадам да гэтага артыкула. Не павінна быць шмат сюрпрызаў, калі вы раней выкарыстоўвалі Vue і Webpack:

Знешнія

Параметр знешняй канфігурацыі можа быць выкарыстаны для выключэння залежнасцей з выходнага пакета Webpack. Я не хачу, каб у маім пакеце былі залежнасці, бо яны будуць павялічваць памер пакета і, магчыма, ствараць канфлікты версій у карыстальніцкім асяроддзі. Карыстальнік павінен усталяваць залежнасці сам.

У праекце тэматычнага даследавання я выкарыстоўваю бібліятэку момантаў як залежнасць. Каб пераканацца, што ён не ўваходзіць у мой пакет, я ўказваю яго як знешні ў сваёй канфігурацыі вэб-пакета:

Навакольнае асяроддзе будуецца

У Vue.js ёсць два розныя асяроддзя, якія карыстальнік можа захацець усталяваць кампанент. Па-першае, браўзэр, напр.

Па-другое, асяроддзя распрацоўкі на аснове Node.js, напрыклад

У ідэале я хачу, каб карыстальнікі маглі выкарыстоўваць Vue Clock у абодвух асяроддзях. На жаль, у гэтых умовах код павінен быць усталяваны па-рознаму, а гэта значыць, што мне трэба наладзіць дзве розныя зборкі.

Для гэтага я ствару дзве асобныя канфігурацыі Webpack. Гэта прасцей, чым здаецца, бо канфігурацыі практычна аднолькавыя. Спачатку я ствараю агульны аб'ект канфігурацыі, а затым выкарыстоўваю зліццё Webpack, каб уключыць яго ў абедзве канфігурацыі асяроддзя:

Агульная канфігурацыя дакладна такая, як была раней (большую частку я абрэзаў, каб зэканоміць месца), за выключэннем таго, што я выдаліў параметры ўводу і імя файла для вываду. Я ўкажу іх індывідуальна ў асобных канфігурацыях зборкі.

Пакет аглядальніка

Аглядальнікі не могуць імпартаваць модулі JavaScript з іншага файла, напрыклад, з вузлоў. Вы можаце выкарыстоўваць загрузнік сцэнарыяў, напрыклад AMD, але для прастаты я хацеў бы дазволіць, каб мой сцэнар кампанента быў больш лёгка дададзены ў якасці глабальнай зменнай.

Акрамя таго, я не хачу, каб карыстальнік занадта шмат думаў, спрабуючы зразумець, як выкарыстоўваць кампанент. Я раблю гэта для таго, каб кампанент мог лёгка зарэгістравацца як глабальны кампанент, калі карыстальнік устаўляе сцэнар. Тут дапамагае убудаваная сістэма Vue.

Меркаваны вынік - гэта простая ўстаноўка:

Убудова

Спачатку я ствару абгортку плагіна, каб палегчыць ўстаноўку кампанента:

Гэты убудова рэгіструе кампанент глабальна, каб карыстальнік мог выклікаць кампанент гадзін з любой кропкі прыкладання.

Канфігурацыя Webpack

Цяпер я выкарыстоўваю файл убудовы як кропку ўваходу для стварэння браўзэра. Я перайду ў файл, які называецца "vue-clock.min.js", бо гэта найбольш відавочна для карыстальніка.

Экспарт у выглядзе бібліятэкі

Webpack можа выставіць ваш уключаны сцэнар рознымі спосабамі, напрыклад: як модуль AMD або CommonJS, як аб'ект, як глабальная зменная і г. д. Вы можаце вызначыць гэта з дапамогай опцыі libraryTarget.

Для камплекта аглядальніка я выкарыстоўваю мэта акна. Я таксама мог бы выкарыстоўваць UMD для большай гнуткасці. Аднак, паколькі я ўжо ствараю два наборы, я буду толькі абмяжоўваць гэты набор для выкарыстання ў аглядальніку.

Я таксама даю імя бібліятэкі "VueClock". Гэта азначае, што браўзэр, які змяшчае камплект, будзе даступны як глабальнае акно.

Звязка вузлоў

Каб карыстальнікі маглі выкарыстоўваць кампанент у асяроддзі распрацоўкі на аснове вузла, я выкарыстоўваю мэтавую бібліятэку UMD для набору вузлоў. UMD - гэта гнуткі тып модуля, які дазваляе выкарыстоўваць код у розных загрузніках сцэнарыяў і ў розных асяроддзях.

Звярніце ўвагу, што набор вузлоў выкарыстоўвае кампанент аднаго файла ў якасці кропкі ўваходу і не выкарыстоўвае ўбудовачную абгортку, бо яна не патрэбна. Гэта дазваляе зрабіць больш гнуткую ўстаноўку:

package.json

Перад публікацыяй у NPM я наладзім файл package.json. Падрабязнае апісанне кожнага варыянту можна знайсці на сайце npmjs.com.

Я скараціў большую частку гэтага файла, але тут трэба мець на ўвазе некалькі асноўных момантаў:

  1. Асноўны файл сцэнарыя, г.зн. Х. "Галоўная": "dist / vue-clock.js". Гэта паказвае на файл вузлавога пакета і гарантуе, што загрузчыкі модуляў ведаюць, які файл трэба прачытаць; Х.

2. Залежнасці. Паколькі я выключыў залежнасці з пакета, карыстальнікам неабходна ўсталяваць залежнасці, каб выкарыстоўваць пакет.

Апублікаваць у NPM

Пасля правільнай налады майго кампанента ён гатовы да публікацыі ў NPM. Я не буду паўтараць інструкцыі тут, бо яны падрабязна апісаны на npmjs.com.

Вось вынік:

  • Код Github
  • Бок NPM
Прайдзіце бясплатны ўступны курс Vue.js! У гэтым 30-хвілінным відэаўрок даведайцеся, што такое Vue, якія прыкладання вы можаце ствараць з яго дапамогай, як яны параўноўваюцца з React & Angular. Рэгістрацыя бясплатна!