virtual背景のロジックをnpm パッケージ化した件

はじめに

先日、自分史上初めてnpmのパッケージを作成したので、記録として作業の流れを残しておくものです。
新しい情報は少ないかもしれません。
作成したパッケージは以前紹介したvirtual背景のコンポーネントです。

もしよかったら使ってやってください。

概要

Typescriptを用いた環境でnpmパッケージを作成してpublishするまでの流れです。

前提

• npmのアカウントは作っておく。
• githubのアカウントとリポジトリは作っておく。
• 作成したgitリポジトリをクローンして、そのディレクトリに移動している状態。

作業の流れ

まずはじめに、npmの環境設定とログインをしておきましょう。

$ npm set init.author.name "xxxxxx"
$ npm set init.author.email "[email protected]"
$ npm set init.author.url "https://qiita.com/wok"
$ npm adduser

それでは、プロジェクトの初期化を行いpackage.jsonを作成します。

$ npm init -y

次に必要なモジュールをインストールします。
ここではtypescriptを用いてパッケージを作成するので、typescript用の環境を準備します。
npx tsc --initによりtsconfig.jsonが生成されます。

$ npm install -D typescript @types/node
$ npx tsc --init

パッケージを利用する人が型推論を使えるように、宣言ファイルを生成するようにtsconfig.jsonを変更します。
また、私はデバッグが楽になるようにsource mapも生成しておきます。これは好みです。
出力先は色んな場所で解説されているものに合わせて./distにしておきます。
moduleは用途により変える必要があるようですが、あまり理解できていません。今回はesnextにしています。
esnextにした場合は、moduleResolutionをnodeにしておかないとコンパイルが通らないようです。
（この辺がjsをいまいち好きになれないところなんだよな。そんなに覚えられないよ。）

"declaration": true, 
"sourceMap": true,
"outDir": "./dist",
"module": "esnext",
"moduleResolution": "node", 

この段階で、ソースコードを書き始めます。（実際はもともとのソースコードをコピペした。）
そしてコンパイル。エラーがなければ下記のようなファイルが出力されていると思います。

$ npx tsc
$ ls dist/
index.d.ts  index.js  index.js.map

次に、package.jsonを変更してエントリポイントを設定してあげます。
今回の場合は次のような記述になります。

  "main": "dist/index.js",

併せて、package.jsonにパッケージの情報を記載します。
nameはリポジトリ名が自動で設定されますが、すでに（他の人に）使われている名前はpublish時にエラーとなるので、かぶらないように設定します。なお、かぶったときに表示されるエラーメッセージは意味不明なものなので、ハマると辛いです。たしか、セキュリティが問題、という感じのメッセージだったと思います。

  "name": "local-video-effector",
  "author": "xxxxxx <[email protected]> (https://qiita.com/wok)",
  "license": "Apache-2.0",

ここまでできたら、あとはpublishするまであと少し。
バージョン情報追加します。gitリポジトリと同期させておくと、問題が発生したときに解析が楽になりそうです。

npm version patch
git push origin <tag>

最後にpublishして完了です。

npm publish

成果物

お疲れ様でした。＞自分

次回はここで作成したバーチャル背景のパッケージの使ったデモの開発を説明する予定です。

では、また。