Самый быстрый способ опубликовать компонент Vue.js в NPM
Во время этого руководства ни один загрузчик ES6 не пострадал
Допустим, вы только что создали новый компонент Vue.js и хотите поделиться им со всем миром, как вы можете это сделать?
Самый быстрый и простой подход - просто поместить ваш *.vue файл прямо в NPM как есть.
Давайте посмотрим и на примере, ладно?
Помните, что для создания проекта NPM вам просто нужно ввести npm init в оболочке в вашем рабочем каталоге и следовать инструкциям.
В нашем случае структура нашего проекта выглядит так:
. ├── package.json └── example.vue
У нас есть только один компонент: example.vue. Чтобы опубликовать в NPM, откройте package.json и поместите его патч в поле main. Конечно, вы можете назвать свой компонент как хотите.
//package.json
{
"name": "vue-npm-example",
...
"main": "example.vue", // just put the path here
....
}
Вот и все! Теперь мы можем опубликовать это.
npm publish
Оно работает!
Https://www.npmjs.com/package/vue-npm-example
Затем вы можете использовать его где угодно, установив, как всегда, с помощью командной строки npm
npm install vue-npm-example
а затем вы можете импортировать его в свой компонент
//Vue.js component
<template>
<npm-example></npm-example>
</template>
<script>
import npmExample from 'vue-npm-example'
export default {
name: 'app',
components: {
npmExample
}
}
</script>
И вуаля. Теперь мы поделились нашим компонентом с миром.
Заключение
Совместное использование компонента Vue.js действительно просто и может быть выполнено за секунды. Имейте в виду, что прямое размещение файла .vue в NPM может быть не всегда лучшим решением, поскольку кто-то может не использовать классическую конфигурацию веб-пакета с vue-loader. В этом случае его компиляция в ES5 с использованием babel может повысить совместимость.
Вы можете узнать больше об этом в этом замечательном руководстве Энтони Гора.
Вы также можете найти эти статьи интересными
Спасибо за чтение
Франческо Саверио
