vueのコンポーネントをパッケージ化

参考

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

 <template>
   <!-- HTML部分-->
   <div>
     share molecules
     <test />
     <test />
   </div>
 </template>
 
 <script>
   import Test from '../atoms/TestAtom.vue'
   export default {
     //JavaScript(Vue.js)部分
     components: {
       Test,
     }
   }
 </script>
 
 
 <style scoped>
   /* CSS部分 */
 </style>

メイン処理のラッパ作成

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

サンプル

packages_test_share.zip(137)

公開したものを使用する

.npmrc作成

//npm.pkg.github.com/:_authToken=トークン
@funa-take:registry=https://npm.pkg.github.com

パッケージ追加

yarn add @funa-take/test_package

コンポーネントをインポートして使用する

 <template>
   <div>
     pages
     <test-molecule />
     <test-molecule2 />
   </div>
 </template>
 <script>
 import {TestMolecule, TestMolecule2} from '@funa-take/test_package'
 export default {
   //JavaScript(Vue.js)部分
   components: {
     TestMolecule,
     TestMolecule2,
   }
 }
 </script>