npm パッケージを作成・公開する手順（TypeScript対応版）

npm パッケージを作成・公開する手順（TypeScript対応版）

December 12, 2021

1. npm の準備をする #

最初に npm の準備をしましょう。

1-1. npm のアカウントを作成する #

パッケージを公開するために npm のアカウントが必要なので作成しましょう。

https://www.npmjs.com/

メールアドレスは公開される可能性が可能性があります。必要に応じて適当なサブアドレスなどを使用しましょう。

1-2. CLI で npm にログインする #

ローカルのターミナルで npm login を実行します。

ユーザネーム、パスワード、メールアドレスを聞かれるので、先ほど作成したときの内容を回答します。

Username: ********
Password: ********
Email: (this IS public) ********@gmail.com

Logged in as ******** on https://registry.npmjs.org/.

2. パッケージを作成する #

パッケージを作成については要所だけ抜粋する形で記載します。

なお以降の記述に悩んだ際には他のパッケージを参考にすると良いです。

有名どころとして React と、小さなパッケージの例として React-Toastify のリポジトリを貼っておきます。

React: https://github.com/facebook/react
React-Toastify: https://github.com/fkhadra/react-toastify

2-1. package.json を作成する #

package.json の作成例です。

{
  "name": "hello-world-package",
  "version": "0.0.1",
  "description": "A very simple library that only outputs hello world.",
  "license": "MIT",
  "main": "dist/main.js",
  "types": "dist/main.d.ts",
  "files": ["dist"],
  "repository": {
    "type": "git",
    "url": "https://github.com/jane-doe/hello-world-package.git"
  },
  "author": "Jane Doe",
  "contributors": ["John Doe"],
  "keywords": ["hello-world", "example"],
  "peerDependencies": {
    "react": "^17.0.0"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "typescript": "^4.0.0"
  },
  "scripts": {
    "build": "tsc",
    "prepublishOnly": "npm run build"
  }
}

各項目の意味は適宜調べてください。上記以外にも様々な設定項目があります。全項目を設定する必要はなく、上記では最小構成に近い形で例示しています。

main で指定したファイルがパッケージをインポートしたときに読み込まれるファイルです。
types で型定義ファイルを指定します。
files に配布対象のファイルを指定します。

また、公開用パッケージを作っていないと見かけないコマンドだと思いますが、prepublishOnly というものを指定しています。

この指定は任意ですが、ここに記載したコマンドはパッケージ公開コマンド（npm publish）の中で起動されます。

上記の例では、prepublishOnly に npm run build つまり npm run tsc を指定することで、公開コマンドの中で TypeScript のコンパイルを実行、そのまま公開するようになっています。

prepublishOnly 以外にも prepublish や prepare があり、それぞれ起動タイミングが異なるほか、厄介なことに各コマンドのフックタイミングが npm のバージョンによっても微妙に異なるため、より詳細に知りたい方は npm のドキュメントを参照してください。

https://docs.npmjs.com/

2-2. tsconfig.json を作成する #

tsconfig.json の作成例です。

{
  "compilerOptions": {
    "lib": ["dom", "esnext"],
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,
    "removeComments": true,
    "outDir": "./dist"
  },
  "include": ["main.ts"]
}

"declaration": true としておくと、TypeScript の .ts ファイルをコンパイルしたときに .js ファイルに加えて型定義ファイル .d.ts も生成されるようになります。

2-3. パッケージ本体のプログラムを作成する #

思い思いのコードを書いてください。

2-4. README を作成する #

任意ではありますが README.md を作成するのが良いでしょう。

（例）

# `hello-world-package`

A very simple library that only outputs hello world.

## Installation

`npm install hello-world-package`

## Example Usage

Just call a function.

import helloWorld from 'hello-world-package';
helloWorld();

2-5. CHANGELOG を作成する #

任意ではありますが CHANGELOG.md を作成するのが良いでしょう。

（例）

## 0.0.1 (December 24, 2020)

- Initial Commit.

2-6. LICENSE を作成する #

任意ではありますが LICENSE を作成するのが良いでしょう。

（例）

MIT License

Copyright (c) [YOUR NAME]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

2-7. .gitignore を作成する #

いつも通りに必要に応じて .gitignore を作成しましょう。

2-8. .npmignore を作成する #

npm に公開する必要のないファイルは .npmignore に記載しましょう。

なお package.json の files にて配布対象ディレクトリを指定している場合は不要です。（files で指定されなかったファイルは公開されないため、.npmignore でさらに設定する必要はない。）

.npmignore と .gitignore の存在有無で npm に公開される内容が以下の通り変わります。

.npmignore があればその内容が適用され、
.npmignore はないが .gitignore があればその内容が適用され、
どちらもなければ全て公開される。

3. npm に公開する #

満を持して公開です。

3-1. パッケージを公開する #

…といっても以下のコマンドを実行するだけです。

npm publish

これで無事に公開されました。公開されていることを npm のサイトで確認しましょう。

参考：開発中は npm link を使うと便利 #

npm link を使うと、手元で開発しているパッケージを import することが可能です。これにより変更したコードをリアルタイムで確認できます。

開発しているパッケージの package.json が src ディレクトリ直下にある。（src/package.json）
上記を import する側のファイル index.ts が app ディレクトリ直下にある。（app/index.ts）

上記の場合、以下を実施してください。

src ディレクトリにて npm link を実行する。
app ディレクトリにて npm link [パッケージ名] を実行する。（例： npm link hello-world-package）

これで app/index.ts にて通常通り以下のように import が可能です。

import helloWorld from 'hello-world-package';

npm link の削除 #

以下で link する前の状態に戻すことができます。

app ディレクトリにて npm unlink [パッケージ名] を実行する。
src ディレクトリにて npm unlink [パッケージ名] を実行する。
npm uninstall --g [パッケージ名] を実行する。

npm link の仕組み #

npm link をした際、グローバルな（グローバルインストールしたときの）node_modules のディレクトリから npm link したディレクトリ（src）に向かってシンボリックリンクが作成されます。

npm link [パッケージ名] した際には npm link したディレクトリ（app）の node_modules 内からグローバルな node_modules にシンボリックリンクが作成されます。

このようにシンボリックリンクを通じて開発中のパッケージを参照するようになっています。

npm link 後にグローバルインストールしているパッケージを表示する以下コマンドを実行すると、シンボリックリンクが作成されていることが確認できます。

npm ls --g