JavaScript・TypeScriptへの理解を深めることを目的にReactのコンポーネントライブラリを作成しました。そうして形になったライブラリをnpmからインストールできるようにしてみたため、それまでの道のりを体験レポートとして記事にします。
※ 2023/02現在では動作するだけのプレリリースの段階です。
ライブラリを公開する準備
npmアカウントを作成する
まずはnpmでライブラリを公開するために、npmの公式サイトにアクセスしてアカウントを作成を行います。アカウントを作成するには、ユーザー名、メールアドレス、パスワードなどの情報を入力する必要です。
アカウント作成時に入力したユーザー名やパスワードは、あとの工程でコマンドラインからnpmにログインする時に必要になるため、覚えておく必要があることに注意してください。
ライブラリ名を決定する
続いて、今回作成するライブラリの名前を決定します。ライブラリ名がそのままnpmのパッケージ名になります。既に使用されているパッケージ名は使うことができません。
例えば、今回わたしが作成したライブラリには「my-simple-components」という名前をつけました。そのため、「my-simple-components」というライブラリ名は今後使用できません。
そのライブラリ名がユニークかどうかは、npmの公式サイト上部にある検索バーから確認することができます。
その他、「https://www.npmjs.com/package/パッケージ名」で検索することでも確認することができます。例えば2023/02現在、「https://www.npmjs.com/package/my-simple-components2」で検索を行うと404 not foundページが表示されるため、「my-simple-components2」というライブラリ名は使用可能です。
開発環境の構築
ライブラリを作成するために必要な開発環境を整えましょう。Node.jsがインストールされていない場合は、公式サイトからダウンロードしてインストールしてください。
まずはプロジェクトフォルダを作成し、npmパッケージの初期設定を行います。ここでは、プロジェクトフォルダ名とライブラリ名は「my-original-library」として進めます。
$ mkdir my-original-library
$ cd my-original-library
$ npm init -yこれで、package.jsonファイルが作成されました。-yオプションを指定して作成すると初期バージョンが1.0.0となっています。重複したバージョンを公開することができないため、あらかじめ0.0.1などに変更しておくと良いかもしれません（1敗）
package.jsonファイルの内容は以下の通りです。わたしの環境下での設定のため、あくまで参考程度に留めてください。また、devDependenciesなど、一部省略している箇所があります。
{
"name": "my-simple-components",
"version": "0.1.0",
"main": "lib/cjs/index.js",
"module": "lib/esm/index.js",
"types": "lib/index.d.ts",
"files": [
"lib" // npmに公開されるフォルダ
],
"license": "MIT"
}ライブラリはReact×TypeScript×Storybookで開発を行いました。今回の記事ではReactやTypeScriptの環境構築に関する説明は行いません。詳細については公式ドキュメントなどを参照してください。
また、記事の最後にはGithubへのリンクを掲載しております。
ライブラリの作成
コンポーネントの作成
src/components/buttonフォルダ内にindex.tsxファイルを作成しました。buttonタグを返すだけの簡単なコンポーネントのため、サンプルコードは省略します。
なおTypeScript側のメインエントリファイルであるsrc/index.tsは以下のようなコードとなっています。
export type { ButtonProps } from './components/button';
export { default as Button } from './components/button';TypeScriptのトランスパイル
最後に、TypeScriptで作成したコンポーネントをJavaScriptにトランスパイルします。
使い慣れているWebpackを利用したかった所ですが、Storybookと競合してしまうそうで、rollupというモジュールバンドラに変更しました。はじめて使うパッケージのため、以下の記事を参考に設定を行いました。
npmに公開する
いよいよnpmにライブラリを公開します。
ターミナルでnpm loginコマンドを実行してnpmにログインします。この時、npmアカウント作成時に入力したユーザー名やパスワードの入力が求められます。
$ npm loginログインが完了しましたら、npm publishコマンドでnpmにライブラリを公開します。
$ npm publishこれにてライブラリの公開は完了です。npmの公式サイトにアクセスし、ライブラリ名で検索してみましょう。先ほど作成したライブラリが確認できると思います。また、npm i パッケージ名を実行して作成したライブラリをインストールしてみてください。
まとめ
今回の記事では、npmでライブラリを公開するまでの体験レポートを記事にしてみました。
実際に公開してみたまでは良いのですが、現時点ではあくまで実行段階でエラーがなく動作するだけのコンポーネントでしかありません。今後改良を続けて使いやすいライブラリにできたら良いなと考えています。
【2023/03/02 追記】
ライブラリ名が被ってしまう問題は、npmのスコープという機能を利用することで解消できるそうです。
