jQueryPluginを作ってnpmで公開するまでの流れと構成


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

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


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

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

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

[jquery.plugin.starter-kit](https://github.com/kamem/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](https://github.com/kamem/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](https://www.npmjs.com/package/gulp-amdclean)を使っています。

まぁ特に気にすることないはずです。

##### 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

今後対応したい
---------

* テストの実装