概要
今までReact Nativeで開発しながら、他の人が作ったオープンソースをたくさん使いました。いつもこのようにオープンソースだけ使ったので、自分も一回オープンソースを作ってみようと考えてreact-native-image-modalと言う簡単なオープンソースを作成しました。
React Nativeのオープンソースライブラリを開発する方法について知りたい方は下記のブログポストを参考してください。
このブログポストでは自分が作成したJavaScriptライブラリをNPM(Node Package Manager)へ配布する方法について説明します。
NPMアカウントを作る
NPMへ自分が作ったJavaScriptライブラリを配布するためにはNPMと言うサービスのアカウントが必要です。
NPMのアカウントがいない方は、下記のリンクをクリックしてNPMサービスへ移動した後、NPMアカウントを生成してください。
- NPMサービスサイト: https://www.npmjs.com/
npm info
自分が開発したJavscriptライブラリを配布する前、配布が可能なパッケージ名か確認する必要があります。当然なことですが、NPMに配布されたライブラリと同じ名前を使うことはできないです。
下記のコマンドを使って、自分のJavaScriptライブラリ名が使えるか確認します。
npm info [JavaScript Package Name]
もし、重複されたら、下記のように、すでにNPMへ配布されたライブラリに関するデータが確認できます。
[email protected] | MIT | deps: 1 | versions: 1
deploy projects easily in the cloud. Optimised for GitLab CI
https://gitlab.com/pushrocks/npmdeploy#README
keywords: deploying, made, easy
dist
.tarball: https://registry.npmjs.org/npmdeploy/-/npmdeploy-1.0.1.tgz
.shasum: c298d768aac7ccb89a38c20a0c904341fc87c484
dependencies:
gitlab: ^1.6.0
maintainers:
- lossless <[email protected]>
dist-tags:
latest: 1.0.1
published over a year ago by lossless <[email protected]>
もし、重複されてない名前だったら、下記のように404エラーが表示されます。
npm ERR! code E404
npm ERR! 404 'temp-npmdeploy' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it
npm ERR! 404 (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! 404
npm ERR! 404 'temp-npmdeploy@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm init
自分が開発したJavaScriptライブラリをNPMへ配布するためNPMに必要な情報を設定する必要があります。
自分が開発したJavaScriptライブラリフォルダへ移動して、下記のコマンドを実行します。
# cd ProjectName
npm init
上のコマンドを実行すると、下記のような画面が確認されます。下記で説明する内容は後でも変更ができるので、お気軽に進んでください。
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (npmdeploy)
フォルダ名を基準にしてpackage nameを決定するか、他の名前を設定するか聞いてくれます。私たちは上でnpm infoを使って配布可能な名前を探しましたので、その名前を入力します。
version: (1.0.0)
その後、バージョンを入力する画面がでます。バージョンは基本的major.minor.patchを使います。すでに開発が終わって、配布だけ残ってる状況の場合、1.0.0をそのまま使います。まだ、開発中で、ライブラリが完璧ではない場合、0.0.1を入力して安定されたバージョンではないことを明記します。
description:
JavaScriptライブラリに関して説明を作成する部分です。自分のライブラリの説明を作成します。
entry point: (index.js)
開発したJavaScriptライブラリのEntryファイル（Mainファイル）を指定します。
test command:
自分が開発したJavaScriptライブラリをテストすることができるテストコマンドを入力します。テストを実行するコマンドがない場合、Enterキーを押して進めます。
git repository:
配布するJavaScriptのソースコードを確認することができるGitリポジトリのURLを入力します。URLが存在しない場合Enterキーを押して進めます。
keywords:
配布するJavaScriptを簡単に分かれるようにキーワードを入力します。(ex> jQuery, react-native, reactjs など)
author:
配布する人の情報を入力します。普通はName <Email Address>の形式を使います。
license: (ISC)
配布するライブラいのライセンスに関する質問です。自分のライブラリのライセンスへ合わせて入力します。(ex> MIT, ISC など)
ライセンスへキーワードに関しては下記のリンクを参考してください。
このように全ての項目を入力したら自分のプロジェクト中にpacakge.jsonファイルが生成されます。
npm login
NPMへ自分のライブラリを配布するため、下記のコマンドを使ってNPMサービスへログインする必要があります。
npm login
上のコマンドを実行すると下記のようにログインするための手続きが実行されます。
Username: dev-yakuza
Password:
Email: (this IS public) [email protected]
Logged in as dev-yakuza on https://registry.npmjs.org/.
上で生成したNPMアカウントの情報を入力してログインします。ログインをしたら、下記のコマンドを実行してログインができたか確認します。
npm whoami
# dev-yakuza
npmignore
実際開発には必要ですが、開発が終わったライブラリを使う時はいらないファイルたちがあります。例えば、テストコード、例題ソースなどです。このように開発には必要ですが、配布にはいらないファイルたちを.npmignoreファイルを使って除くことができます。
下記の内容は自分が開発したreact-native-image-modalに関する.npmignoreファイルです。
node_modules
Develop
DevelopWithExpo
Example
ExampleWithExpo
.github
demo
npm publish
今NPMhe自分のライブラリを配布する準備が終わりました。下記のコマンドを使って自分のライブラリをNPMへ配布します。
npm publish
ライブラリを配布する前、特定なコマンドを実行する必要がある場合、package.jsonを下記のように修正します。
"scripts": {
...
"prepare": "rm -rf dist && tsc"
},
私はTypescriptを使ってライブラリを開発したので、配布する前Typescriptをビルドする必要があります。このようにpackage.jsonのscriptsへprepareコマンドを定義すると、npm publishコマンドを実行する時、該当コマンドが実行されます。.
これで皆さんが開発したライブラリをNPMへ配布しました。配布したライブラリを使うためには皆さんがNPMでライブラリを使う時と同じように使えます。
npm install --save [Your Package Name]
npm version
NPMへ配布したライブラリを修正して、また配布することがあります。このように再配布する時、バージョン情報を上げる必要があります。
バージョンを上げるためにpackage.jsonファイルのバージョン("version": "0.0.1")を直接修正して配布しても大丈夫ですが、下記のコマンドを使ってバージョンをアップデートすることもできます。
npm version patch
npm version minor
npm version major
上のコマンドを必要な状況に合わせて、簡単にバージョンを上げることができます。
完了
これで自分が開発したJavaScriptライブラリをNPMへデプロイする方法について説明しました。初めてオープンソースを作ってNPMへ配布したら、私も何か開発者の文化へ参加した気がしました。
皆さんも皆さんだけのオープンソースを作って配布して、美しい開発者の文化へ参加して見ることはどうですか？
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
