Создание библиотеки компонентов Vue.js: Часть VI - публикация в NPM

Последний шаг в создании плагина библиотеки компонентов VUE – это опубликовать его как пакет. Большинство пакетов публикуются на NPM, если намерение состоит в том, чтобы распространять внешнюю аудиторию. Другие варианты реестра включают Реестр пакетов GitHub и Артефактор . Также возможно запустить свой собственный Частный реестр .

В этом посте я объясню процесс, чтобы опубликовать в NPM. Подобные шаги могут быть предприняты для использования другого реестра, если он также использует npm (или пряжа ) CLI API Конвенции.

npm

Во -первых, создайте учетную запись на npm – и настроить многофакторную аутентификацию!

Здесь вам нужно будет выбрать имя вашего пакета и разрешения. Имеет смысл убедиться, что имя пакета, которое вы хотите, или совпадает с функциональностью вашей библиотеки, доступно до того, как укрепить имя в самих ссылках на библиотеку.

Проверьте наличие имени пакета перед покупкой доменного имени!

имя Поле в Package.json Файл будет использоваться для определения имени пакета. Итак, сначала сделайте немного расследования на NPM, чтобы убедиться, что имя пакета доступен Анкет

Примечание о семантике: компонент VUE Библиотека будет опубликовано как Пакет на NPM.

Издательский

Чтобы опубликовать нашу библиотеку, нам нужно сделать некоторые дополнения к Package.json файл.

Я буду использовать Vue-Example-Pkg как имя. Обязательно обменивайте любые ссылки на свое собственное имя пакета, когда вы видите Vue-Example-Pkg Анкет

package.json

Ниже приведен пример Package.json В качестве ссылки при создании собственного на основе функциональности и активов вашего пакета. Этот файл должен выглядеть знакомо – это расширение того же Package.json Файл, который использовался на протяжении всей серии.

Полная ссылка всех доступных вариантов с объяснениями доступна в NPM документация Анкет

{
 // name of the library on npm!
 "name": "vue-example-pkg",
 "version": "0.1.0",
 // If you set "private": true in your package.json, then npm will refuse to publish it.
 "private": false,
 "main": "dist/vue-example-pkg.umd.min.js",

 // this makes sure that library is distributed to a CDN
 "unpkg": "dist/vue-example-pkg.umd.min.js",
 "jsdelivr": "dist/vue-example-pkg.umd.min.js",

 "author": "Your name",
 "license": "MIT", // or whatever you decide
 "description": "",
 "files": [
   "dist/*",
   "src/*"
 ],
 "homepage": "",
 "repository": {
   "type": "git",
   "url": "https://github.com/siegerts/vue-example-pkg.git"
 },
 "bugs": {
   "url": "https://github.com/siegerts/vue-example-pkg/issues"
 },
 "scripts": {
   "serve": "vue-cli-service serve",

   // tell Vue CLI that you want this project built as a library
   "build": "vue-cli-service build --target lib --name vue-example-pkg src/main.js",
   "lint": "vue-cli-service lint",

   // builds the library before publishing to npm; points to `build` script above
   "prepublishOnly": "$npm_execpath build",

   // builds documentation; for use with doc deploy (i.e. Netlify or other)
   "docs:dev": "vuepress dev docs",
   "docs:build": "vuepress build docs"
 },
 "dependencies": {
   ...
 },
 "devDependencies": {
   "@vue/cli-plugin-babel": "^3.3.0",
   "@vue/cli-plugin-eslint": "^3.3.0",
   "@vue/cli-service": "^3.3.0",
   "@vue/eslint-config-prettier": "^4.0.1",
   "babel-eslint": "^10.0.1",
   "eslint": "^5.8.0",
   "eslint-plugin-vue": "^5.0.0",
   "style-resources-loader": "^1.2.1",
   "stylus": "^0.54.5",
   "stylus-loader": "^3.0.2",
   "vue-cli-plugin-style-resources-loader": "^0.1.3",
   "vue-template-compiler": "^2.5.21",
   "vuepress": "^1.0.0-alpha.32"
   ...
 },
 "peerDependencies": {
   "vue": "^2.5.21"
 },

 // once again, SEO
 "keywords": [
   "vue",
   "vuejs"
   ...
 ]
}

строить

Скажите Vue CLI, что вы хотите, чтобы этот проект был создан как библиотека

Важно просмотреть Vue Cli Build Target Анкет В частности, мы будем строить этот пакет как Vue Library Анкет Это будет объединить библиотеку так же, как мы ссылались на нее ранее, но с новым пакетом имя вместо предыдущего ссылки на путь.

import ComponentLibrary from 'vue-example-pkg'

Vue.use(ComponentLibrary)

Prepublishonly

строит библиотеку перед публикацией в NPM; указывает на строить сценарий

Вышеупомянутое заклинание-довольно голые кости. На этом этапе можно выполнить другие команды, такие как Тесты и Linting в зависимости от вашего рабочего процесса. Просто будьте в курсе это Prepublishonly используется в качестве последнего набора команд перед публикацией при запуске Yarn Publish ( или NPM Publish )

Важно отметить $ npm_execpath ссылка в этой команде. Это переменная среды, которая определяет, что npm использовать. Сначала это может звучать немного странно 😄. Это пригодится, когда пряжа Менеджер пакетов используется вместо npm . Это не делает предположений о менеджере пакетов для использования и вместо этого использует то, что в настоящее время установлено (то есть вызывает). Если вы используете Windows Machine, вам нужно будет поменять это на % npm_execpath% Анкет

Для справки:

Распределение по CDN

Линии, ссылаясь на CDN, выберут файл для распространения и предоставляются на каждом CDN соответственно. Это хорошо, если вы хотите, чтобы ваш пакет был доступен для тех, кто не использует локальный менеджер пакетов в своих проектах.

"unpkg": "dist/vue-example-pkg.umd.min.js",
"jsdelivr": "dist/vue-example-pkg.umd.min.js",

Для получения дополнительной информации о jsdelivr настраивать:

https://github.com/jsdelivr/jsdelivr#configuring-a-default-file-in-packagejson

Завершая

Теперь запуск вашей команды Publish (ниже) должна инициализировать процесс публикации в NPM.

$ yarn publish  # or npm publish

Я реалист 😇. Там Уилл Будьте повешены через этот процесс, чтобы сделать его точно подходящим для вашего проекта. Это нормально. Не забудьте повеселиться. Есть много команд и параметров. Важно сделать прочную основу, а затем итерацию и настраивать с этого момента 👍.

Надеюсь, что сериал был полезен! Если так (или нет!), Дайте мне знать – @Siegerts Анкет

Оригинал: “https://dev.to/siegerts/creating-a-vue-js-component-library-part-vi-publishing-to-npm-3i3a”

npm