Chapter 04

ライブラリの公開

yusuke
yusuke
2021.05.24に更新

さて、ライブラリの実装ができたところで、次はnpmに公開します。

👀 ライブラリの確認

まずはライブラリを公開する前に、すでに同じ名前のライブラリが存在しないか確認します。
もし登録済みなら、そのライブラリの情報が表示されます。

$ npm info typescript
typescript@4.2.4 | Apache-2.0 | deps: none | versions: 1955
TypeScript is a language for application scale JavaScript development
https://www.typescriptlang.org/

keywords: TypeScript, Microsoft, compiler, language, javascript

bin: tsc, tsserver

dist
.tarball: https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz
.shasum: 8610b59747de028fda898a8aef0e103f156d0961
.integrity: sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==
.unpackedSize: 59.2 MB

maintainers:
- typescript-bot <typescript@microsoft.com>
- weswigham <wwigham@gmail.com>
- sanders_n <ncsander@indiana.edu>
- andrewbranch <andrew@wheream.io>
- minestarks <mineyalc@microsoft.com>
- rbuckton <rbuckton@chronicles.org>
- sheetalkamat <shkamat@microsoft.com>
- orta <orta.therox@gmail.com>
- typescript-deploys <ortam@microsoft.com>

dist-tags:
beta: 4.3.0-beta                          latest: 4.2.4                             tag-for-publishing-older-releases: 4.0.6  
dev: 3.9.4                                next: 4.4.0-dev.20210521                  
insiders: 4.2.0-insiders.20210210         rc: 4.3.1-rc                              

published a month ago by typescript-bot <typescript@microsoft.com>
package.json
{
  "name": "my-original-library-demo", // 👈 これがライブラリの名前になるよ
  "version": "1.0.0",
  "main": "src/index.js",
  "license": "MIT",
  "scripts": {
    "test": "mocha"
  },
  "dependencies": {
    "emoji-regex": "^9.2.2",
    "figlet": "^1.5.0"
  },
  "devDependencies": {
    "chai": "^4.3.4",
    "mocha": "^8.4.0"
  }
}

🔑 npmにログイン

以下のコマンドを実行して、プロンプトにしたがって情報を入力します。

$ npm login
Username: your-username
Password: 
Email: (this IS public) your-email@gmail.com
Logged in as <your-username> on https://registry.npmjs.org/.

🚀 ライブラリの公開

ログインができたら、以下のコマンドを実行すると公開されます。

$ npm publish
npm notice 
npm notice 📦  my-original-library-demo@1.0.0
npm notice === Tarball Contents === 
npm notice 567B src/index.js     
npm notice 697B test/main.test.js
npm notice 294B package.json     
npm notice 45B  README.md        
npm notice === Tarball Details === 
npm notice name:          my-original-library-demo                
npm notice version:       1.0.0                                   
npm notice package size:  843 B                                   
npm notice unpacked size: 1.6 kB                                  
npm notice shasum:        be8ab948570b7d73ee4d230ba2da56a1091df4ac
npm notice integrity:     sha512-WSA+enQ1oGAcj[...]SRQdJRh+NFoBQ==
npm notice total files:   4                                       
npm notice 
+ my-original-library-demo@1.0.0

実際に検索してみると......公開されています!


おめでとうございます!はじめてのJavaScriptライブラリを公開しました🎉🎉🎉

🧑‍🔬 試してみる

デモ用のディレクトリを作成して、ライブラリが動作するか確認してみよう。

$ git init demo-project
$ cd demo-project
$ yarn init
$ touch index.js
$ yarn add my-original-library-demo

ライブラリがnpmからインストールされます。

info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
└─ my-original-library-demo@1.0.0
info All dependencies
├─ emoji-regex@9.2.2
├─ figlet@1.5.0
└─ my-original-library-demo@1.0.0
✨  Done in 2.20s.

index.jsにコードを書いて、node index.jsを実行してみましょう。

index.js
const myOriginalLibrary = require('my-original-library-demo');
myOriginalLibrary('🎉');


おめでとうございます!公開したライブリが使えるようになりました🎉🎉🎉