!!!参考
https://jp.vuejs.org/v2/cookbook/packaging-sfc-for-npm.html
https://docs.github.com/ja/enterprise-cloud@latest/actions/publishing-packages/publishing-nodejs-packages
https://docs.github.com/ja/packages/working-with-a-github-packages-registry/working-with-the-npm-registry
https://b1san-blog.com/post/nuxtjs/nuxt-component/
https://qiita.com/teramo3033/items/714211b6a080d8308f1b
https://rightcode.co.jp/blog/information-technology/vue-js-original-component-npm-cdn-release
https://dev.classmethod.jp/articles/introduction-to-github-packages/
!!!概要
vueのコンポーネントをgithub packagesでパッケージ化して複数プロジェクトで共有する。
一つのパッケージに複数のコンポーネントを共有化する。
!!!公開する
!!公開するコンポーネントを作成する
!TestMolecule.vue
share molecules
!!メイン処理のラッパ作成
!library-main.js
import TestMolecule from './components/molecules/TestMolecule.vue';
import TestMolecule2 from './components/molecules/TestMolecule2.vue';
export function install(Vue) {
if (install.installed) return;
install.installed = true;
Vue.component('TestMolecule', TestMolecule); //コンポーネント登録
Vue.component('TestMolecule2', TestMolecule2);
}
const plugin = {
install,
};
let GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
}
export {TestMolecule, TestMolecule2};
!!package.json修正
{
"name": "@funa-take/test_package",
"version": "0.1.13",
"private": false,
"main": "dist/share_component.common.js",
"unpkg": "dist/share_component.min.js",
"scripts": {
"build-bundle": "vue-cli-service build --target lib --name share_component ./src/library-main.js"
},
"repository": {
以下省略
!!.npmrc作成
//npm.pkg.github.com/:_authToken=トークン
@funa-take:registry=https://npm.pkg.github.com
!!ビルド
yarn build-bundle
!!公開
yarn publish
!!サンプル
{{ref packages_test_share.zip}}
!!!公開したものを使用する
!!.npmrc作成
//npm.pkg.github.com/:_authToken=トークン
@funa-take:registry=https://npm.pkg.github.com
!!パッケージ追加
yarn add @funa-take/test_package
!!コンポーネントをインポートして使用する
pages
!!サンプル
{{ref packages_test.zip}}
{{category2 プログラミング言語,JavaScript}}