最近はがっつりjQueryでーって言うのも少なくなってきているかもしれないですが
細かいものを作ったときにプラグインとしてまとめておくとあとあと
自分でもnpm installして使うーってことができるので良いかなと思ってます。
いままでもプラグインをいくつか作っていてのですが
npmに登録するまでなかなか行かないって場合が多かったです。
最近は昔のを整理してnpmに公開するようにしているので
最初の構成（starter-kit的なの）と
ざっくりですが公開するまでの流れをメモっておこうかと思います！
まずはじめに
package.json
npmに登録するときに必要です。
最低限下記の項目を今回作るプラグインに合わせて修正しましょう
name
プラグインの名前 (npmに登録するときの名前です)
キャメルケースだと登録できないようなのでハイフンケースで名前をつけるようにしましょう。
// キャメルケース ☓
jquery.testPlugin x
// ハイフンケース ○
jquery.test-plugin
version
プラグインのバージョン（なにか修正するたびにバージョンをアップしましょう）
description
プラグインの説明文（npmのプラグイン説明欄に標示されます）
author
自分用に設定しましょう
repository
このプラグインのリポジトリ情報
このプラグインに合わせて設定しなおしましょう。
license
ライセンス情報。自分はプラグインを公開する際はMITで公開しています。
main
吐き出されたmainのjsファイルの位置を示します。
ここを描いておくことでwebpackを使ってimportする際にここのファイルを見に行ってくれるようになります。
keywords
プラグインに関わるキーワード（複数可）
プラグインを作り始めるときのキット
プラグインを作り始めるときにいろいろと用意するのが大変なので
ES6でさくっと書けるようなstarter-kit的なのを用意しました。
ファイル構成とファイルの説明
├── LICENSE.txt // ライセンス情報記載(src/LICENSE.txtから吐き出されます)
├── README.jp.md // 日本語のプラグイン説明
├── README.md // 英語のプラグイン説明
├── dist // 公開用プラグイン用フォルダ（src/jsの吐き出し先）
│ └── js
│ ├── jquery.testPlugin.js
│ └── jquery.testPlugin.min.js
├── docs // demo用フォルダ
│ ├── css // demo用css（src/cssの吐き出し先）
│ │ └── main.css
│ ├── index.html
│ └── js // プラグインで使うjsをいれてdemoで試す用
│ ├── jquery.easing.1.3.min.js
│ └── jquery.js
├── gulpfile.js // gulpのせってい
├── gulpfile_settings.js // gulpfileで使うためのフォルダ構成などが書いてあります
├── package.json // npm公開に必要
└── src // 作業用フォルダ
├── LICENSE.txt // package.jsonから名前情報を取得、日付を更新して吐き出します
├── css
│ └── main.css // docs/css内に吐き出し
└── js // フォルダ内のファイルをpackage.jsonからプラグイン名、日付、名前などをcopyrightに反映して結合しdist/jsにはき出します
├── copyright.js
├── copyright.min.js
├── end.js
├── jquery.testPlugin.jsx //package.jsonに記述したnameと同じ名前になるようになっています。（こっちはキャメルケースになるようにしているので注意！）
└── start.js // requireが使えるような記述がかいてあります。
初め方
npm install
作業開始
npm run watch
このcommandを実行するとsrcフォルダ内のファイルを編集したときに
dist内にファイルを吐き出すことができるようになっています。
あとはsrc内のファイルをいじってプラグインをつくっていけばOKです。
下記をブラウザで確認すればdocs/index.htmlを確認できるのでプラグインを作る際はここで確認して下さい。
http://localhost:8888/docs/
index.html内コメントアウトしてますが、下記で作りながら確認していくことができます。
<script src="../dist/js/jquery.test.js"></script>
プラグイン公開前は下記内に移動しましょう（そうしないとgithub pageのデモとして動作しないため）
<script src="js/jquery.testPlugin.js"></script>
jsについて
このときのjsはes6が使えるようになっています。
requireはwebpackはプラグインとしてはファイルサイズが重くなってしまうため
amd-cleanを使っています。
まぁ特に気にすることないはずです。
cssについて
postcssを使っています。
src/cssのファイルはdocs/cssにはき出されます。
docsについて
docsはgithubの昨日でgithub pageとして公開することができます。
プラグインのデモをつくって公開しましょう。
CHANGELOGの自動化
npm run changes
tagを切ってからnpm run changesを実行してください。
git repositoryのrelease 情報をみて自動でCHANGELOG.mdを作ってくれます。
NPMに公開する
タグを切るのを忘れずに
https://github.com/kamem/jquery.plugin.starter-kit/releases
package.jsonに記述したバージョンと同じバージョンのタグを切ってあげましょう。
コマンド実行して公開
下記のcommandをpackage.jsonと同フォルダで実行するとnpmに公開することができます。
またバージョンアップするときも同じコマンドを打てばでいけるので便利です。
npm publish
updateするときもpackage.jsonバージョンアップしてタグをきってからnpm publishすることを忘れずに！
※ バージョンもnpmのコマンドでやってくれるみたい
http://yosuke-furukawa.hatenablog.com/entry/2014/06/10/100410
今後対応したい
- テストの実装