最近はがっつりjQueryでーって言うのも少なくなってきているかもしれないですが

細かいものを作ったときにプラグインとしてまとめておくとあとあと
自分でもnpm installして使うーってことができるので良いかなと思ってます。

いままでもプラグインをいくつか作っていてのですが
npmに登録するまでなかなか行かないって場合が多かったです。

最近は昔のを整理してnpmに公開するようにしているので

最初の構成（starter-kit的なの）と
ざっくりですが公開するまでの流れをメモっておこうかと思います！

jquery.plugin.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的なのを用意しました。

jquery.plugin.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

今後対応したい

テストの実装