はじめに
皆さんこんにちは、フロントエンドエンジニアのWooです。⚡️🌪
npmモジュール（npm パッケージ)を作成しデプロイしてオープンソースとして使えるところまでやってみたいと思います。
npm (Node Package Manager)
開始する前に、簡単にnpmについて調べてみたいと思います。
npmの役割はパッケージ管理ツールです。 ソフトウェアを管理し、インストールをサポートしてくれます。 この記事を書いた時点では公開のパッケージ数約1,688,642個以上のnpmパッケージが公開されており現在もまだnpmのパッケージが増えています。
npm インストール
Node.jsをインストールするとnpmも同時にインストールがされます。 下記のリンクでNode.jsのインストールが簡単にできます。
package.json
package.jsonを生成するためにはプロジェクトのフォルダからnpm initのコマンドを叩く必要があります。
Package.jsonは開発に必要な情報などを記載する場所であり、必要なパッケージをインストールする時に自動で記載をしてくれます。
package-lock.json
package-lock.jsonは各パッケージの依存関係の管理をするファイルです。
npm initを実行した時には生成されませんが、このnpmパッケージをインストールしたり、変更、削除などの操作を行うと生成されます。
npmユーザー登録
npm公式ページで登録することができます。 お名前とメールアドレス、パスワードを入力した後、加入したメールアドレスに本人認証メールが届くので承認したらnpmパッケージをデプロイすることができます。
npmパッケージ開発
npm 初期化
プロジェクトのフォルダ(リポジトリ)を作成してコマンドを叩きます。
npm init -y
package.jsonが生成されるので下記のように設定を行います。
{ "name": "@[npmid]/[パッケージ名]", // <-追加 "version": "1.0.0", "description": "どんなパッケージのかの説明", // <-追加 "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { // <-追加 "type": "git", "url": "リポジトリのURL" }, "bugs": { // <-追加 "url": "リポジトリのissuesのURL" }, "homepage": "リポジトリのreadmeURL", // <-追加 "keywords": [ "キーワード", // <-追加 "keyword" // <-追加 ], "author": "開発者", // <-追加 "license": "MIT" // <-変更 }
注意点としてはlicenseの設定ですが、自分はMITによくします。
MITとは、「コードは好きに使っても良いけど、公開されたコードを使って何か問題が起きた場合、作者は責任とらないよ」というlicenseで、
オープンソースにはMITライセンスをよく使うらしいです。 他にもいろいろなlicenseがありますので調べてみてください。
npmパッケージ作成
rootにindex.jsを作成します。
下記は簡単挨拶文を出力する簡単なサンプルコードです。
export class Test { constructor(name) { this.name = name } action() { return `Hello ${this.name}` } }
その他最低限必要なファイルを追加してモジュールのアップロードの準備を完了します。
root/ ├── index.js ├── .gitignore ├── .npmignore ├── README.md ├── LICENSE └── package.json
npmログイン
ログインはディレクトリのrootからコマンドを叩きます。
> npm login Username: 登録したID Password: Email: (this IS public) 登録したメールアドレス Logged in as youngsoohan on https://registry.npmjs.org/.
ログインが成功されたらアクセストークンが発行されコマンドでデプロイすることができます。 トークンはマイページで確認することができます。
npm デプロイ
デプロイは上記のpackage.jsonに記載したnameがパッケージ名になります。
約1,688,642パッケージの中から被らないパッケージ名で公開しなければいけません。
そのため@useridを頭につけると被ることはないので一般的には@useridをつけてデプロイをすることが多いです。
例）@npmid/modalのような感じです。
"name": "@[npmid]/[パッケージ名]"
バージョンも設定する必要があり、npm init -yの時、defaultで1.0.0が記されます。
自分は正式のリリースとして問題なければ1.0.0でアップを行い、その前までの開発段階では0.0.1から設定して公開するようにしてます。
今回はサンプルとして公開し後ほど削除するので1.0.0で公開しました。
"version": "1.0.0",
公開コマンド(下記は無料プランのコマンドです。)
npm publish --access public
npmのマイページに接続したらちゃんと公開されています！
npmのデプロイ完了しましたー🔥
公開したパッケージ使ってみる
npm i @npmid/test
import { Test } '@npmid/test'
const test = new Test(`npm`)
console.log(test.action())
npmにちゃんと挨拶をしていますので問題なく公開はされているようです。
npm パッケージ削除
注意点としては最後に消したいバージョンを書かないといけないのと、時間過ぎてしまうと自分で消すことができずnpmに問い合わせをしないといけないようなので必要でなければすぐ消しましょう⚡️。
npm unpublish @userid/test@1.0.0
最後に
今回の内容はサンプルとしての内容ですが実際にはフォームのバリデーションのパッケージを開発し公開しました。
初めて開発をして色々調べながらですがとても勉強になりました。
実際公開したパッケージをどんどんプロジェクトに導入し工数削減を目指して行きたいと思っております。
最後になりますが、Wizではエンジニアを募集中です！
興味のある方は是非覗いてみてください!↓
