自作Vue3コンポーネントをGitHub packagesへプライベート公開する方法

https://twitter.com/ryosuke_hu/status/1501967118752960513

今回の記事のソースファイルをパブリックレポジトリで提供してます

この記事を読んでパッケージ再現したい人は下記のコード使ってください。記事で説明してますけど、package.jsonを修正して、GitHubアカウント名や、

.npmrcのトークンを自分のに変えて、.gitを削除して、自分のレポ作ってそこにpushすれば、パッケージサンプルとして流用可能です。

パッケージ用のVueアプリを作る

パッケージの為に必要な簡単なディレクトリ構造

(後で全てのディレクトリ構造も見せます)

注意点、一応、確実にこの記事の事象を再現するためパッケージ名以外のファイル名やディレクトリ名は同じにしてください。

library-main.jsに下記を記述

Vueパッケージの中身を記述

package.jsonを記述

下記のコードを全てコピペしても良いです。この記事を見る人が結構未来の人だった場合、Vueなどのバージョンが上がってるかもしれません。

ただし、ryosuke-hujisawaとかは僕のGitHubアカウント名なので、各々変えてください。

重要な部分は、publishConfigrepository、author、license、files、scripts(build-bundle)、

build-bundleしてパッケージを完成させる。

build-bundleしないと利用できるファイルに落ちてきません。

private pkj利用のためのトークンを作る

下記のURLを参考にトークンを作る。

「書き込み」「読み込み」をONにしておく。もし何かしらエラーが起きたら、そういうエラー内容出るので、準じて色々アクセス許可してみて試してください。

.npmrcを作ってください

一応、パッケージ側にも、パッケージ利用する側にも、ルートディレクトリに.npmrcを作ってください。

アカウント名を自分のGitHubの名前に変えて、ghp_AAAAAAAAAAAAはトークンの値に変えてください。

パッケージ用に普通にGitHubレポジトリを作る

コード全部addしてpushする

workflows/deploy.ymlが必要

忘れてた、。パッケージをリリースする為に、ワークフローも追加してまたpush。とりあえず脳死で下記のコードをコピペでOK

パッケージのアップデート

パッケージコードを修正、add、コミットしてpushした後に、npm version minorするとパッケージのバージョン上がります。

その状態でyarn publishすればパッケージ更新されます。

パッケージ確認

こんな感じ。

アップデートされてるべ。

 

今のパッケージの構造パス

最終的に、パッケージの中身はこんな感じの階層構造になってます。

 

パッケージを利用するVueアプリを作る

トークンを忘れずに追加

pkjインストールできます

HelloWorld.vueで利用してみる

デフォルトで入ってるコンポーネントHelloWorld.vueにパッケージを入れてみましょう。

何度も言うけど、GitHubアカウントの名前はご自身のを使うこと。

.npmrcがないとインストールできない

プライベートか試す場合は、.npmrcを消して、新しいプロジェクトを作ってみてinstallしてみてください。

参考になった記事

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

未整理記事

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です