自作Vue3コンポーネントをGitHub packagesへプライベート公開する方法
https://twitter.com/ryosuke_hu/status/1501967118752960513
今回の記事のソースファイルをパブリックレポジトリで提供してます
この記事を読んでパッケージ再現したい人は下記のコード使ってください。記事で説明してますけど、package.jsonを修正して、GitHubアカウント名や、
パッケージ用のVueアプリを作る
パッケージの為に必要な簡単なディレクトリ構造
(後で全てのディレクトリ構造も見せます)
注意点、一応、確実にこの記事の事象を再現するためパッケージ名以外のファイル名やディレクトリ名は同じにしてください。
library-main.jsに下記を記述
Vueパッケージの中身を記述
package.jsonを記述
下記のコードを全てコピペしても良いです。この記事を見る人が結構未来の人だった場合、Vueなどのバージョンが上がってるかもしれません。
ただし、ryosuke-hujisawaとかは僕のGitHubアカウント名なので、各々変えてください。
重要な部分は、publishConfig、repository、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してみてください。
参考になった記事
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！