Як апублікаваць кампанент 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.
Я скараціў большую частку гэтага файла, але тут трэба мець на ўвазе некалькі асноўных момантаў:
- Асноўны файл сцэнарыя, г.зн. Х. "Галоўная": "dist / vue-clock.js". Гэта паказвае на файл вузлавога пакета і гарантуе, што загрузчыкі модуляў ведаюць, які файл трэба прачытаць; Х.
2. Залежнасці. Паколькі я выключыў залежнасці з пакета, карыстальнікам неабходна ўсталяваць залежнасці, каб выкарыстоўваць пакет.
Апублікаваць у NPM
Пасля правільнай налады майго кампанента ён гатовы да публікацыі ў NPM. Я не буду паўтараць інструкцыі тут, бо яны падрабязна апісаны на npmjs.com.
Вось вынік:
- Код Github
- Бок NPM
Прайдзіце бясплатны ўступны курс Vue.js! У гэтым 30-хвілінным відэаўрок даведайцеся, што такое Vue, якія прыкладання вы можаце ствараць з яго дапамогай, як яны параўноўваюцца з React & Angular. Рэгістрацыя бясплатна!