最近はフロント側をReactで書くことが多い。その中でこれは再利用できるかもなと思ったものをnpmパッケージとして切り出す時に、どうするのが定石なのかわからなくて調べたのでまとめる。

Reactコンポーネントとタイトルにはあるけども、Reactに関連するところを除けば「トランスパイルが必要なコードをnpmパッケージするには」という内容になっている。

基本方針

• gitリポジトリにはトランスパイル前のソースのみを含める(srcにおく)
  
• prepare scriptでトランスパイルする
  
• publishするものにはトランスパイル後のソースのみを含める(libに置く)
  
  

とする。
参考：ライブラリをES6で書いて公開する所から始めよう | Web Scratch

具体的な手順

.gitignore

$ echo '/lib' >> .gitignore

babel

$ npm install --save-dev babel-cli babel-preset-env babel-preset-react

トランスパイラはパッケージの開発時のみに使うのでdevDependencies。

.babelrcは

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

等としておく。

publishするものにはトランスパイル後のソースのみが含まれるようにする

package.jsonに

{
  …,
  "files": [
    "lib"
  ],
  …
}

使用時にはトラインスパイル後のソースが使われるようにする

package.jsonに

{
  …,
  "scripts": {
    "watch": "babel -w src --out-dir lib",
    "prepare": "babel src --out-dir lib"
  },
  …
}

prepareスクリプトは

• ローカルのディレクトリ（や、npm >= 5ではgitリポジトリ）からインストールした場合
  
• publishする前
  
  

のどちらでも呼ばれる。
参考：scripts | npm Documentation

reactをpeerDependenciesに

{
  …,
  "peerDependencies": {
    "react": "^15.3.0 || ^16.0.0",
    "react-dom": "^0.14.7 || ^15.0.0 || ^16.0.0"
  },
}

dependenciesで良さそうに思えるのだけど、公開されているパッケージは基本peerDependenciesに入れていた。
調べてみると、dependenciesに入れると複数バージョンのreactが読み込まれて問題が起きる場合があるための模様。

開発

あとはnpm run watchしつつsrc下にコードを書いていけばよい。