npmパッケージ公開デビューした

npmパッケージデビューしました。
公開するまでに感じたあれこれを残しておこうと思います。

経緯としてはbrowserifyからwebpackに移行して、webpackと親しくなっていると痒いところに手が届くようなプラグインが欲しくなったというのがありました。

例えば browserifyで綺麗にライセンス表示を出してくれたlicensifyのようなもの。
webpack上でライセンス表示といえば、UglifyJsPluginとuglify-save-licenseを掛け合わせた方法が一般的ですが、イケてる感じにしたいとなるとなかなかに難しい。ネットサーフィンしながら他のプラグインでできないかなーと探しても僕のググり力ではいい感じのが見つからない…というわけで作ることにしました。

そうこうして license-banner-webpack-plugin を作りました。
※パッケージの中身についてはご容赦くださいm(_ _)m

npm publish の際の心構え

いかんせん初めてなものでドキドキしながら npm publish したわけですが、最低限以下のことに気をつけながらやりました。

• テストが通ったものを出す
• バージョン上げる
• 遠慮しない

拙いテストになってしまっているのですが人が使うかもしれない可能性もあるのでテストコードをリリース前に書いて出すようにするのが最低限のマナーになるのかなと思います。

バージョン上げる作業なれないと忘れがちになりそうなので気をつけるようにしています。（一応自動化を目標にはしたい）

遠慮しないこともまた最初の一歩としては大事かなと思います。
いままでずっと遠慮していたんですが、そもそも僕ごときのエンジニアが出したパッケージなんて誰も見ないんで諸々の不安は杞憂だなと思います。

そんな心構えの中での最初の npm publish は思った以上に簡単に公開できて怖かったです。

写真は新宿某所にある会員制のお肉のお店"29on"のお肉

license-banner-webpack-plugin の紹介

一応つくったので中身を紹介すると webpack でコンパイルしたコードに書くエントリーポイントごとで使っているパッケージをそれぞれの排出されるファイルにライセンスのバナーを追加する簡単なお仕事をしています。

欲しかった機能としては各chunk内で使われているパッケージを、指定したフォーマットでバナー化してくれるというもので、

const LicenseBannerPlugin = require('license-banner-webpack-plugin');

module.exports = {
  entry: {
    hoge: 'src/hoge.js' // この中で lodashやらreactやら
    app: 'src/app.js'
  },
  // ...
  plugins: [
    new LicenseBannerPlugin()
  ]
};

例えばこんな感じで設定があるとすると

/*
lodash@X.X.X
  license: $LICENSE
  author: $AUTHOR
  repository: $REPOSITORY
*/
// bundled code ...

のように各entryごとに使用しているライセンスがアウトプットされます。

実装の部分は結構無理矢理な実装をしたのですが、それでもテストを書いて、遠慮しない精神でいったら、今まですこし怖がってた npm publish も案外そんなにハードル高くないことに気づけて良かったです。

実装方法はかなりシンプルだったり、変なことをしているなと思うので、知見ある方にこういった方法がいいとかなんとかissueになげたりPRなげたりしてもらえるとすごく助かります。