npmパッケージを「さくっ」と公開する

Gakuです。

最近、reactをちまちま触っています。
そんな中で触れることが多いnpmパッケージですが、「自分もnpmパッケージを公開したい!」と思いました。

そこで今回は簡単なreactコンポーネントをnpmパッケージとして公開する手順を備忘録として残したいと思います。

今回作ったもの

今回作ったものは下記になります。
「ブログ読むのめんどくさいよ~」とか「実行しつつ試したい!」という方はご参考下さい。

 github.com 
https://github.com/gaku3601/react-helloworld-sample
https://github.com/gaku3601/react-helloworld-sample

npmパッケージの公開

npmデベロッパーとして登録する

何はともあれ。まず、npmへデベロッパー登録をする必要があります。
登録は下記から可能です。

登録が完了したなら、登録したアカウントとnpmコマンドを紐付けするために下記コマンドを実行します。

npm adduser

emailやpassword等々、先程登録したアカウントの情報を入力すればOKです。
これで公開する準備は整いました。簡単ですね。

HelloWorldコンポーネントを作成する

今回は呼び出すと「HelloWorld」と出力する簡単なreactコンポーネントを作成したいと思います。
まずはnpm initでpackage.jsonを作成しましょう。

$ npm init
name: (react-helloworld-sample)
version: (1.0.0) 0.0.1
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: gaku
license: (ISC) MIT

npmパッケージとして既に公開されている名前は使用出来ませんので注意が必要です。
作成したpackage.jsonはこんな感じ

{
  "name": "react-helloworld-sample",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "gaku",
  "license": "MIT"
}

そしたらHelloWorldコンポーネントを作成します。
src/scriptsへHelloWorld.jsファイルを作成し、以下のように記述します。

import React from 'react'

const HelloWorld = () =>(
  <div>
    HelloWorld
  </div>
)

export default HelloWorld

また、エントリーポイントとなるindex.jsでHelloWorld.jsをexportします。

import HelloWorld from './src/scripts/HelloWorld.js'

export { HelloWorld }

そしてこれらのコードをbabelでコンパイルを行います。
コンパイルを行ったindex.jsのパスをpackage.jsonのmain部分に記述します。

{
  "name": "react-helloworld-sample",
  "version": "0.0.1",
  "description": "",
  "main": "./src/dist/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/babel ./src/scripts --out-dir ./src/dist"
  },
  "author": "gaku",
  "license": "MIT",
}

Exampleプロジェクトの作成

公開するnpmパッケージと同階層にexampleフォルダを作成し、reactアプリケーションを動作させる環境を構築します。
react環境構築の話となってしまうため割愛しますが、詳しくはgithubのexampleフォルダをご確認下さい。

 github.com 
https://github.com/gaku3601/react-helloworld-sample
https://github.com/gaku3601/react-helloworld-sample

Exampleプロジェクトとnpmパッケージの紐付け

[npm link]コマンドを使用すればExampleプロジェクト内で作成中のnpmパッケージを使用することが可能です。
npmパッケージフォルダで[npm link]コマンドを実行し、exampleフォルダ内で[npm link パッケージ名]を実行後、package.jsonのdependenciesに[“パッケージ名”:”*”,]を記述することで紐付けを行うことが可能です。
紐付けが出来ているか確認するにはexampleフォルダ内で[npm ls パッケージ名]を実行してみて下さい。

$ npm ls react-helloworld-sample
example@1.0.0 C:\Users\proga\develop\projects\react-helloworld-sample\example
`-- react-helloworld-sample@0.0.1  -> C:\Users\proga\develop\projects\react-helloworld-sample

このように表示されれば紐付け完了です。

Exampleアプリケーションの作成

exampleアプリケーションでreact-helloworld-sampleを呼び出してみます。

import React from 'react'
import {render} from 'react-dom'

import { HelloWorld } from 'react-helloworld-sample'

render(
  <div>
    <HelloWorld />
  </div>,
  document.querySelector('#content')
)

しかし、この状態でアプリケーションを実行してもnpmパッケージ側に必要なモジュールが入っていないためエラーとなってしまいます。
適宜、必要な依存モジュールをnpmパッケージ側にインストールしてあげて下さい。
これで「HelloWorld」と出力されればアプリケーションの作成は完了です。

作成したnpmパッケージを公開する

公開手順は至極簡単です。下記コマンドをnpmパッケージのフォルダで実行してあげれば公開することが可能です。

npm publish

簡単ですね。バージョンアップを行う場合は、package.jsonのバージョンを上げてあげないとエラーとなってしまうためご注意下さい。
良きnpmパッケージライフを(´・ω・`)ノ

npm公開の注意点

npmパッケージの公開は簡単に可能です。
しかし、一旦公開してしまうと簡単には削除できない点(実際には削除は不可能)で注意が必要です。

npmのポリシー上、一旦公開したパッケージは削除することができないそうです。
(※誰かが作成したパッケージを使用している場合、そのアプリケーションを壊してしまう恐れがあるため。)

今回の記事を書くまでに2つのnpm公開勉強用パッケージを公開していたのですが、削除したい旨をnpmサポートにメールしたところ「削除はできないが開発元npmへパッケージを移譲するという形でなら対応可能」とのことでしたので、そのようにさせて頂きました。
メールも英語でかなりめんどくさかったので、「公開したものは削除できない」と覚えておけばOKかと思います。

以上となります。フロントは楽しいですが、いろいろ勉強しないとなので正直キツイっすわ(´・ω・`)

コメントを残す

メールアドレスが公開されることはありません。