Како створити и објавити библиотеку компонената Вуе

Библиотеке компонената данас су у великом бесу. Олакшавају одржавање доследног изгледа и осећаја у целој апликацији.

У својој досадашњој каријери користио сам мноштво различитих библиотека, али коришћење библиотеке је веома различито од тачног сазнања шта улази у прављење једне.

Желео сам дубље разумевање како се гради библиотека компонената и желим вам показати како и ви можете боље разумети.

Да бисмо креирали ову библиотеку компонената, користићемо vue-sfc-rollupнпм пакет. Овај пакет је врло користан услужни програм приликом покретања библиотеке компонената.

Ако имате постојећу библиотеку са којом желите да користите услужни програм, погледајте документацију коју они нуде.

Овај пакет креира скуп датотека за започињање пројекта. Као што објашњава њихова документација, датотеке које креира укључују следеће (СФЦ је скраћеница од Сингле Филе Цомпонент):

  • минимална конфигурација збирног података
  • одговарајућу датотеку пацкаге.јсон са буилд / дев скриптама и зависностима
  • минимална датотека бабел.цонфиг.јс и .бровсерслистрц за преписивање
  • омот који се користи при скупљању приликом паковања вашег СФЦ-а
  • пример СФЦ-а за покретање развоја
  • пример датотеке за употребу која се може користити за учитавање / тестирање ваше компоненте / библиотеке током развоја

Услужни програм подржава и појединачне компоненте датотека, као и библиотеку компонената. Важно је напоменути ову реченицу из документације:

У библиотечком режиму постоји и „индекс“ који декларише компоненте изложене као део ваше библиотеке.

Све ово значи да се у процесу подешавања генеришу неке додатне датотеке.

Кул, хајде да направимо библиотеку

Прво ћете желети да инсталирате vue-sfc-rollupглобално:

npm install -g vue-sfc-rollup

Када се то глобално инсталира, из командне линије идите у директоријум у којем желите да се налази ваш пројекат библиотеке. Када се нађете у тој фасцикли, покрените следећу команду да бисте иницијализовали пројекат.

sfc-init

Изаберите следеће опције у оквиру упита:

  • Да ли је ово једна компонента или библиотека? Библиотека
  • Како се зове нпм ваше библиотеке? (ово ће бити потребно јединствено на нпм. Користио сам бриан-цомпонент-либ )
  • Да ли ће ова библиотека бити написана на ЈаваСцрипт-у или ТипеСцрипт-у? ЈаваСцрипт (слободно користите ТипеСцрипт ако знате шта радите)
  • Унесите локацију за чување датотека библиотеке: Ово је име фасцикле које желите да ваша библиотека има. Подразумевано ће бити нпм име које сте му дали горе, тако да можете само притиснути ентер.

По завршетку подешавања, дођите до своје фасцикле и покрените нпм инсталацију.

cd path/to/my-component-or-lib npm install

Када то завршите, можете да отворите фасциклу у жељеном уређивачу.

Као што је горе речено, постоји узорак Вуе компоненте која је направљена за нас. Можете га пронаћи у /src/lib-componentsфасцикли. Да бисте видели како изгледа ова компонента, можете покренути npm run serveи доћи до // лоцалхост: 8080 /

Хајде сада да додамо сопствену прилагођену компоненту. Направите нову Вуе датотеку унутар lib-componentsфасцикле. У овом примеру ћу имитирати дугме које се користи у одељцима за додељивање фрееЦодеЦамп, па ћу га назватиFccButton.vue

Можете да копирате и налепите овај код у своју датотеку:

 {{ text }}   export default { name: "FccButton", // vue component name props: { text: { type: String, default: "Enter Button Text Here" } }, data() {} };   .btn-cta { background-color: #d0d0d5; border-width: 3px; border-color: #1b1b32; border-radius: 0; border-style: solid; color: #1b1b32; display: block; margin-bottom: 0; font-weight: normal; text-align: center; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; white-space: nowrap; padding: 6px 12px; font-size: 18px; line-height: 1.42857143; } .btn-cta:active:hover, .btn-cta:focus, .btn-cta:hover { background-color: #1b1b32; border-width: 3px; border-color: #000; background-image: none; color: #f5f6f7; } 

Можете видети да на врху имамо одељак са основним предлошком са класом коју желимо да има. Такође користи текст који ће корисник проследити.

Унутар ознаке скрипте имамо име компоненте и реквизите које ће компонента заузети. У овом случају постоји само један позвани ослонац textкоји има подразумевану вредност „Покрени тестове“.

Такође имамо и неки стајлинг који ће му дати изглед какав желимо.

Да бисмо видели како компонента изгледа, мораћемо да је додамо у index.jsдатотеку која се налази у lib-componentsфасцикли. Ваша датотека индек.јс би требало да изгледа овако:

/* eslint-disable import/prefer-default-export */ export { default as FccButton } from './FccButton';

Такође ћете морати да увезете компоненту у serve.vueдатотеку унутар devфасцикле како би изгледала овако:

 import Vue from "vue"; import { FccButton } from "@/entry"; export default Vue.extend({ name: "ServeDev", components: { FccButton } }); 

Можда ћете морати npm run serveпоново да покренете да бисте могли да видите дугме, али требало би да буде видљиво када у свом прегледачу отворите // лоцалхост: 8080 /.

Дакле, изградили смо компоненту коју смо желели. Пратићете исти поступак за било коју другу компоненту коју желите да направите. Само их извезите у /lib-components/index.jsдатотеку како бисте их учинили доступним из нпм пакета који ћемо објавити.

Објављивање у НПМ

Сада када смо спремни да објавимо библиотеку у НПМ-у, морамо да прођемо кроз процес израде да би била спакована и спремна за рад.

Пре него што покренемо наредбу буилд, препоручујем да промените број верзије у package.jsonдатотеци, 0.0.1јер је ово први догађај објављивања за нашу библиотеку. Желећемо више од једне компоненте у библиотеци пре него што објавимо званичну 'прву' верзију. Овде можете прочитати више о семантичким верзијама.

Да бисмо то урадили, трчимо npm run build.

Како се у документацији наводи:

Руннинг резултате скрипт за изградњу у 3 саставља фајлове у distдиректоријуму, један за сваку од main, moduleи unpkgособинама наведеним у својој пацкаге.јсон датотеци. Када се генеришу ове датотеке, спремни сте за рад!

Овим извршавањем наредбе спремни смо за објављивање у НПМ. Пре него што то учинимо, уверите се да имате рачун на НПМ-у (што овде можете ако је потребно).

Next we'll need to add your account to your terminal by running:

npm adduser

Understanding package.json

When we publish to npm, we use the package.json file to control what files are published. If you look at the package.json file that was created when we initially set up the project you'll see something like this:

"main": "dist/brian-component-lib.ssr.js", "browser": "dist/brian-component-lib.esm.js", "module": "dist/brian-component-lib.esm.js", "unpkg": "dist/brian-component-lib.min.js", "files": [ "dist/*", "src/**/*.vue" ],

The section under files tells npm to publish everything in our dist folder as well as any .vue files inside of our src folder. You can update this as you see fit, but we'll be leaving it as is for this tutorial.

Because we aren't changing anything with the package.json file, we are ready to publish. To do that we just need to run the following command:

npm publish

And that is it! Congratulations! You've now published a Vue component library. You can go to npmjs.com and find it in the registry.