中安拓也のブログ

プログラミングについて書くブログ

初めてのCordovaプラグイン公開

はじめに

前回の記事cordova-plugin-cache-deleteというCordovaプラグインを作成したので、他の開発者にも使いやすいようにこのプラグインを公開していきます。

Cordovaプラグイン公開

Cordovaプラグインの公開ですが、公式サイトの説明を読むとnpmレジストリの使用を推奨しています。

通常のnpmライブラリ同様、npm publishコマンドでCordovaプラグインについても公開できちゃうんですね....

CordovaプラグインをインストールするCordova CLIのコマンド(cordova plugin add [plugin name])では、npmレジストリからプラグインを引っ張ってくる仕組みになっているようです。

npmアカウント作成

まず、こちらのリンクからnpmアカウントを作成します。

npm adduserコマンド

続いて、Cordovaプラグインのルートディレクトリに移動して、npm adduserコマンドを実行します。ちなみにnpm loginコマンドはnpm adduserコマンドのエイリアスのため、同じ機能を持つコマンドになります。

$ npm adduser

npmアカウント登録時に設定したUsernamePasswordEmailが聞かれるので回答します。

npm publishコマンド

準備ができたのでnpm publishコマンドを実行して、Cordovaプラグインを公開します。

$ npm publish ./

こんな感じのエラー(403 Forbidden)が出て、Cordovaプラグインの公開に失敗しました。

npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/cordova-plugin-cache-delete - Forbidden
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/takuya/.npm/_logs/2021-05-08T15_16_22_628Z-debug.log

スタックオーバーフローを見ると、メールアドレスの確認を実施していないせいで、npmアカウント登録が完全に完了していないのが原因じゃないかとのこと。

受信トレイを確認すると、確かにnpmから登録したメールアドレスの確認メールが来ていました...全然気づかなかった。

f:id:l08084:20210509174829p:plain
npm空のメールアドレスの確認メール

メールの本文にメールアドレスの確認が完了すると、publishができるようになるよ〜って書いてありますね。

メールのVerify email addressボタンを押下すると下記の画面に遷移します。

f:id:l08084:20210509175324p:plain
この画面の時点ではメールアドレスの確認は終わっていません

npmアカウントでログインし直すと、下記の画面が表示されます。

f:id:l08084:20210509175511p:plain
Continueボタンを押下すると、メールアドレスの確認が完了

上記画面でContinueボタンを押下すると、メールアドレスの確認が完了します。

メールアドレスの確認が完了した後に、npm publishコマンドを実行すると、今度はCordovaプラグインの公開に成功します。

$ npm publish ./
+ cordova-plugin-cache-delete@1.0.1

動作確認

npm publishした後だと、以下のようにcordova plugin add [プラグインの名前]でCordovaプラグインをインストールすることができるようになります。

$ cordova plugin add cordova-plugin-cache-delete

初回のCordovaプラグイン公開だけでなく、Cordovaプラグインのバージョンアップも下記の通りnpm publishで実行できます

# パッチバージョンを上げる
$ npm version patch
# バージョンのアップグレードをnpmレジストリに反映する
$ npm publish ./

参考サイト

Plugin Development Guide - Apache Cordova

Contributing packages to the registry | npm Docs

Plugins Release and Moving plugins to npm: April 21, 2015 - Apache Cordova

3分でできるnpmモジュール - Qiita

npm publish や unpublish とかいろいろやってみたメモ - Memento

vue.js - NPM: 403 forbidden - PUT http://registry.npmjs.org/[package-name] - Forbidden - Stack Overflow

「npm audit」って何?って時に少し調べた時のノート - Programming Self-Study Notebook

NPM's suggestion for package lock and audit is misleading or doesn't work - 2nd attempt - 💁🏾 support - npm community portal