Достаточно давно занимаюсь разработкой на Vue.js, но вот упаковывать компоненты для публикации как то не приходилось. Недавно пришла идея интересного компонента, и я решил поделиться им с сообществом. Но дело в том что я не смог найти исчерпывающего руководства на эту тему в рунете. Поэтому, изучив вопрос, решил поделиться своим решением на эту тему.
Также, я решил что неплохо будет прикрутить деплой демо компонента на github-pages, для удобства разработчиков которые решат посмотреть как работает данный компонент.
В документации есть раздел описания процесса публикации cli.vuejs.org/ru/guide/deployment.html, но он не подходит для сборки библиотеки + демо + npm
npm install gh-pages --save-dev
ВАЖНО: Далее в примерах кода везде указано название моего компонента vue-input-calculator, не забудьте изменить.
{
"name": "vue-input-calculator",
"homepage": "https://lih1989.github.io/vue-input-calculator/",
"main": "./lib/vue-input-calculator.common.js",
"version": "0.1.0",
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"predeploy": "vue-cli-service build --mode demo",
"deploy": "gh-pages -d demo",
"build": "vue-cli-service build --target lib --name vue-input-calculator src/lib.js",
"lint": "vue-cli-service lint"
}
…
}
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/'
: '/vue-input-calculator/',
outputDir: process.env.NODE_ENV === 'production'
? __dirname+'/lib'
: __dirname+'/demo',
css: {
extract: false
}
};
import VueInputCalculator from './components/VueInputCalculator'
export default VueInputCalculator
/demo/
...
0. Разработка - npm run serve
1. Сборка нашей библиотеки - npm run build
2.1. Коммитим - git commit - m "commit"
2.2. Отправляем изменения в репозиторий - git push
3. Сборка демо проекта - npm run predeploy
4. Публикация ветки gh-pages - npm run deploy
5. Публикация пакета на npmjs - npm publish (предварительно npm login)
После первого деплоя будет создана ветка gh-pages — нужно зайти в настройки репозитория и установить эту ветку для отображения github pages:
UPD.Я не стал ставить галочку Tutorial, потому что не уверен что принятое мной решение верное и все сделано правильно.Буду очень благодарен за отзыв более опытных коллег.
К сожалению, не доступен сервер mySQL