npmアカウント作成

まずはnpmへデベロッパー登録をします。
npm

登録したuser名、pass、emailは後ほど使います。

登録したアカウントとnpmコマンドを紐付け

npmパッケージを作るディレクトリで

$ npm adduser

user名、pass、emailの入力を求められるので先ほどのnpmへ登録した時のものを入力します。
これで紐付けは完了！

今回のディレクトリ構成

あとはnpmパッケージの開発をするとこなんですが、まずはディレクトリ構成をご紹介します。

今回は下記のようにしました。publicが二つあるのはご勘弁ください。気持ち悪い場合は適当に変更してください。

├ docs/
│  ├ public/
│  └ src/
├ public/
├ src/
├ .babelrc
├ LICENSE.txt
├ package.json
└ README.md

各ディレクトリの説明

各ディレクトリの役割をご紹介します。

docs

ここはGitHub pagesに公開されるディレクトリです。2016年からのGitHubの新機能らしいのですが、masterブランチのdocsディレクトリをGitHub pagesに公開できるようになったようです。このおかげでいくつもリポジトリを持たなくてよくなりました。かなり便利！！

docs直下にはindex.htmlがあります。あとはcssやらimageやら必要なリソースをdocs/publicに入れるようにしました。

docs/srcではGitHub pagesで公開するデモのReactプロジェクトがあります。この辺は、普通にReactのアプリケーションを作る感じなので今回は割愛します。
あ、ちなみに、webpackなどでjsファイルをビルドすると思うんですけど、docs/publicなどにビルドされるようにしてくださいね。

public

ここは直下のpublicですね。npmパッケージとしてメインとなるディレクトリになります。
srcディレクトリで書いたES6プロジェクトをES5にトランスパイルしたものをここに置くようにします。

src

npmパッケージを作るために実際に作業するディレクトリになります。
今回はES6で書いてbabelでトランスパイルされたものをpublicに置くようにします。

.babelrc

babelを使う場合必須になったらしい

{
  "presets": ["es2015", "react"]
}

LICENSE.txt

MITなどのライセンスを載せたいときは必要です。

参考：自作ソースコードに、MITライセンスを適用する３つのやり方

package.json

"name": "sample",の部分はnpmパッケージの名前です。npmパッケージとして既に公開されている名前は使用出来ませんので注意が必要です。
npmであらかじめ調べておくといいでしょう。今回はとりあえずsampleにしておきますが、好きなもに変更して使ってください。

ES6のトランスパイルにはbabelを使います。npm scriptでビルドを行うんですが、先ほど書いたようにsrcディレクトリにあるES6で書かれたJSファイルをトランスパイルしてpublicディレクトリに置くようにしています。

基本的には初めて作業するときは

$ npm run build

その後作業するときは変更をwatchして自動化したいので

$ npm start

これでガシガシ開発できるようになるはずです。

ちなみにpostcssも今回使っているのでそのままscriptなどは参考までに載せておきます。

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "./public/index.js",
  "scripts": {
    "build": "npm run build:babel & npm run build:css",
    "build:babel": "npm run clean && ./node_modules/.bin/babel ./src --out-dir ./public",
    "build:css": "npm run clean && postcss --u postcss-import postcss-cssnext cssnano --dir public/css/ src/styles/*.css",
    "start": "npm run watch:babel & npm run watch:css",
    "watch:babel": "npm run clean && ./node_modules/.bin/babel ./src --out-dir ./public -w",
    "watch:css": "npm run clean && postcss --u postcss-import postcss-cssnext cssnano --dir public/css/ src/styles/*.css -w",
    "clean": "rimraf ./public",
    "tag": "git tag v$npm_package_version",
    "release": "git commit package.json -m \"Version $npm_package_version\" && npm run tag && git push && git push origin master --tags && npm publish"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/samplesample"
  },
  "author": "名前",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "cssnano": "^3.8.1",
    "postcss-cli": "^3.0.0",
    "postcss-cssnext": "^2.10.0",
    "postcss-import": "^8.2.0",
    "postcss-nested": "^1.0.0",
    "rimraf": "^2.6.1",
    "webpack": "^2.3.2"
  },
  "dependencies": {
    "classnames": "^2.2.5",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "react-router": "^4.0.0"
  }
}

README.md

ぶっちゃけ入力しなくてもいいんですけど、ちゃんとREADME.mdを書いておくとnpmにリリースされた後に説明文的なのが入るみたいです。
GitHubでもあったほうがいいと思いますので、ある程度作り込んでおいたほうがいいと思います。

さっそくコンポーネントを作る

やり方等は今回は割愛させていただきますが、リポジトリはGitHubで管理するようにしてくださいね。

とりあえず開発に必要なnpmパッケージをインストールします。

$ npm install

必要であれば他のnpmパッケージもインストールしてください。node_modulesディレクトリはgitignoreしておくといいでしょう。

実際に開発する場合は初回時のみ

$ npm run build

してください。

それ以降は

$ npm start

でガシガシ開発してください。

componentのサンプル

ボタンのサンプルです。CSSに関しては、別途作る必要があるので、srcにディレクトリを分けたほうが開発しやすいと思います。

src/componentでコンポーネントを開発。
src/stylesでCSSを書く感じです。ちなみに先ほどご紹介したpackage.jsonではpostcssの開発もできるようになっているのでぜひ試してみてくださいね。

import React, {Component, PropTypes} from 'react'
import classNames from 'classnames'

export default class Button extends Component{
  render(){
    return(
      <button
        onClick={this.props.onClickAction}
        className={classNames(
        'c-btn',
        this.props.color && `c-btn--${this.props.color}`,
        this.props.size && `c-btn--${this.props.size}`,
        this.props.display && `c-btn--${this.props.display}`,
        this.props.classes
      )}>
          {this.props.children}
      </button>
    )
  }
}

this.props.hogeなどでいくつかプロパティを渡しています。実際にプロジェクト使う場合は

<Button onClickAction={() => {console.log('hgoehgoe')}} color={'primary'} size={'large'} display={false}>Button</Button>

といったようにプロパティを渡してCSSのクラスを付与するようにしています。classnamesを使っていくつもCSSを各パターンでもできなくはないんですが、それだとcomponentっぽくないかなと思うのでこんな感じの作りにするのがいいと思います！！

index.jsを作る

srcディレクトリ直下にindex.jsを作ります。いろんなcomponentを作ると思うので、まとめて呼び出すファイルを作っておきます。

import Button from './component/Button.js'

export {
  Button
}

docsにアプリケーション作る

ここまででだいたいnpmでのReactコンポーネントの作り方がわかってきたかと思うんですけど、ちょっと疑問に思いません？

本当にこれでnpm installして使えんの？

でも、まだ開発中のものをいちいちnpmに公開するのも嫌ですよね。

実は、開発中のnpmパッケージを他のディレクトリと紐づけることができます！！これで実際にnpmパッケージがちゃんと動くか確認しながら開発できるようになります！！
んで、今回はそのディレクトリをdocsディレクトリにします。なぜdocsかというと前述のようにGitHub Pagesに公開するためですね。

というわけで、docsディレクトリにDemoアプリケーションを作っていきます。

docsプロジェクトとの紐付け

まずは、今回作っているパッケージ全体のディレクトリで

$ npm link

とします。そのあとに、そのパッケージを使うディレクトリ、今回だとdocsで

$ npm link パッケージ名

します。さらに、docs内でもReactを使うとなればpackage.jsonがありますよね。なので、package.jsonに

"パッケージ名": "*"

を追加します。これで、開発中のパッケージがdocsディレクトリと紐づけることができます。

docsでcomponentを使う

componentを使う場合はimportして使うだけです。今回はReactのプロジェクトとしては最小のファイルでサンプルとしてしまいますが、実際にはプロジェクトでもCotntainersやcomponentを使ってページを作成する必要があります。あとはwebpackなどでのビルドも必要になります。記事の構成上今回は割愛させていただきます。

イチマルニデザインブログでも紹介しているので参考にしていただければー

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

import { Button } from 'sample'

render(
  <div>
    <Button onClickAction={() => {console.log('hgoehgoe')}} color={'primary'} size={'large'} display={false}>Button</Button>
  </div>,
  document.querySelector('#content')
)

docsを公開

ここまででパッケージの作り方とdocsでのアプリケーションを作れていると思います。あとは公開をしていきます！！
まずはdocsをGitHub pagesとして公開してみます。

1. 公開する前にbuildする

公開する前に、docs内で開発しているjsファイルをビルドしくださいね。おそらく開発中はwebpackなどでwatchしながらだと思うんですけど、それだと基本的にキャッシュ?されたものをみてるだけなので、実際に公開する場合はビルドされたjsファイルが必要になります。

これしないと実は、GitHub Pagesに公開しても思い通りのものが表示されないです。

2. masterブランチにpush

今回の作っているディレクトリをGitHubのmasterブランチにpushします。他ブランチで作っている場合はmasterにマージしてください。

3. GitHubの設定

開発中のリポジトリでsettings > GitHub Pages > Sourceのところでmaster branch / docs folderを選択してSaveします。これでdocsディレクトリがGitHub pagesとして公開されています。

npmに公開

次にnpmに公開します。

$ npm publish

はい！これだけです。初回時は。

アップデートについて

今後修正等した場合に、npmパッケージもアップデートすると思います。実はこっちの方がめんどくさいです。

1. パッケージを修正する
2. GitHubにpush
3. package.jsonのバージョンをあげる
4. gitのタグ付けとか色々してアップデート

結構やること多いんですよね。1と2はいいとして。

package.jsonのバージョンをあげる

諸々変更などが終わってあとはnpmに公開だけとなったらまずはpackage.jsonのバージョンをあげます。これをしておかないとnpm publishしてもエラーになります。
最初の公開ではversion 1.0.0だったのでversion 1.0.1に変更します。

gitのタグ付けとか色々してアップデート

あとは以下のコマンドを打ってやっと公開できます。

$ git commit package.json -m"version 1.0.1"
$ git tag v1.0.1
$ git push origin master --tags
$ npm publish

↑結構めんどくさい

npm scriptで一発でできるようにする

"tag": "git tag v$npm_package_version",
"release": "git commit package.json -m \"Version $npm_package_version\" && npm run tag && git push && git push origin master --tags && npm publish"

上記のようなnpm scriptを作っておけば

$ npm run release

だけでアップデートができます！！

まとめ

これで一通りnpmパッケージを作って公開までできたと思います。結構長文の記事になってしまったけど、やっていることはそれほど難しくないので、是非是非チャレンジしてみてくださいね。
僕が今いるプロジェクトでもReactでやっていたりするので、共通化できるものはnpmパッケージとして作っておけばいろんなサービスに使えそうなのでその点ではいい感じかなーと思っています。