Як створити та опублікувати бібліотеку компонентів Vue

У наш час бібліотеки компонентів дуже люті. Вони дозволяють легко підтримувати незмінний зовнішній вигляд у програмі.

До цього моменту я використовував безліч різних бібліотек, але користуватися бібліотекою - це зовсім інше, ніж знати, що саме входить у її створення.

Я хотів глибше зрозуміти, як будується бібліотека компонентів, і я хочу показати вам, як ви також можете краще зрозуміти.

Для створення цієї бібліотеки компонентів ми будемо використовувати vue-sfc-rollupпакет npm. Цей пакет є дуже корисною утилітою при запуску бібліотеки компонентів.

Якщо у вас є існуюча бібліотека, з якою ви хочете використовувати утиліту, зверніться до документації, яку вони надають.

Цей пакет створює набір файлів для запуску проекту. Як пояснюється їх документацією, файли, які вона створює, містять наступне (SFC розшифровується як Single File Component):

  • мінімальний конфігураційний накопичувальний файл
  • відповідний файл package.json із сценаріями build / dev та залежностями
  • мінімальний файл babel.config.js та .browserslistrc для транпіляції
  • обгортка, яка використовується збірною упаковкою вашого SFC
  • зразок SFC для початку розвитку
  • зразок файлу використання, який можна використовувати для завантаження / тестування вашого компонента / бібліотеки під час розробки

Утиліта підтримує як окремі файлові компоненти, так і бібліотеку компонентів. Важливо зазначити це речення з документації:

У бібліотечному режимі існує також "індекс", який оголошує компоненти, що виставляються як частина вашої бібліотеки.

Все це означає, що в процесі налаштування створюються додаткові файли.

Класно, давайте побудуємо бібліотеку

Спочатку ви захочете встановити vue-sfc-rollupглобально:

npm install -g vue-sfc-rollup

Після того, як це буде встановлено глобально, з командного рядка перейдіть до каталогу, де ви хочете розмістити свій проект бібліотеки. Опинившись у цій папці, запустіть таку команду, щоб ініціалізувати проект.

sfc-init

Виберіть такі параметри в підказках:

  • Це окремий компонент чи бібліотека? Бібліотека
  • Як називається npm вашої бібліотеки? (це має бути унікальним для npm. Я використовував brian-component-lib )
  • Ця бібліотека буде написана на JavaScript або TypeScript? JavaScript (не соромтеся використовувати TypeScript, якщо ви знаєте, що робите)
  • Введіть місце для збереження бібліотечних файлів: Це ім’я папки, яке потрібно мати у вашій бібліотеці. За замовчуванням буде вказано ім’я npm, яке ви вказали вище, так що ви можете просто натиснути клавішу Enter.

Після завершення налаштування перейдіть до своєї папки та запустіть установку npm.

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

Після цього можна відкрити папку у вибраному редакторі.

Як зазначено вище, для нас створений зразок компонента Vue. Ви можете знайти його всередині /src/lib-componentsпапки. Щоб побачити, як виглядає цей компонент, ви можете запустити npm run serveта перейти до // localhost: 8080 /

А тепер давайте додамо власний власний компонент. Створіть новий файл Vue всередині lib-componentsпапки. У цьому прикладі я збираюся імітувати кнопку, що використовується в розділах присвоєння freeCodeCamp, тому буду називати її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папці. Ваш файл index.js повинен виглядати так:

/* 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ще раз, щоб побачити кнопку, але вона повинна бути видимою, коли ви переходите до // localhost: 8080 / у вашому браузері.

Отже, ми створили потрібний нам компонент. Ви будете дотримуватися цього самого процесу для будь-якого іншого компонента, який ви хочете побудувати. Просто переконайтеся, що ви експортуєте їх у /lib-components/index.jsфайл, щоб зробити їх доступними з пакета npm, який ми збираємось опублікувати.

Публікація в NPM

Тепер, коли ми готові опублікувати бібліотеку в NPM, нам потрібно пройти процес збірки, щоб вона була упакована і готова до роботи.

Перш ніж запускати команду build, я рекомендую змінити номер версії у package.jsonфайлі, 0.0.1оскільки це перша подія публікації для нашої бібліотеки. Перш ніж випустити офіційну «першу» версію, нам потрібно більше, ніж лише один компонент у бібліотеці. Детальніше про семантичне керування версіями ви можете прочитати тут.

Для цього ми біжимо npm run build.

Як зазначено в документації:

Запуск результати збирання сценаріїв в 3 -х скомпільованих файлів в distкаталозі, по одному для кожного з main, moduleі unpkgвластивостей , перерахованих у файлі package.json. Після створення цих файлів ви готові до роботи!

За допомогою цього запуску команди ми готові до публікації в NPM. Перш ніж це зробити, переконайтесь, що у вас є рахунок на NPM (що ви можете зробити тут, якщо вам потрібно).

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.