thumbnail

jQueryプラグインを作成する(npmパッケージ化)

先日初めてjQueryプラグインを作成しました。

作成したものは以下のマーカーで塗るようなアニメーションを行うプラグインです。

動作デモはこちら



作成するにあたっての手順のメモです。

環境はmacです。

最終的な成果物


最初に今回作成したもの一式を置いておきます。


構成



  • npmパッケージ化 (npm v6.4.1, node v11.3.0)

  • jQueryはnpmではなく外部(別途読み込まれているものを使用)

  • 表示されたらアニメーションを開始する機能はnpmの「jquery-inview」を使用

  • Babalでトランスパイル

  • webpackでBabelやUglifyJSによるトランスパイルや最適化の実行


npmパッケージ作成


npm init

コマンドを実行

パッケージ名などを適宜入力します。

パッケージのインストール


テストやトランスパイルを行うためのパッケージをインストールしました。

  • webpack(タスクランナー)

  • Babel(トランスパイル)

  • ESLint(構文チェック)

  • Mocha(テストフレームワーク)

  • istanbul(コードカバレッジ計測ツール)

  • jsdom(DOMを使用したテスト用)


最終的に「package.json」は以下のようなものになりました。
{
"name": "jquery.marker-animation",
"version": "1.1.1",
"description": "Marker animation jQuery plugin",
"main": "jquery.marker-animation.min.js",
"scripts": {
"test": "npm run lint && npm run cover",
"lint": "eslint src/*.js",
"cover": "NODE_ENV=test istanbul cover --report text _mocha",
"mocha": "NODE_ENV=test mocha",
"develop": "webpack --mode development",
"build": "webpack --mode production"
},
"repository": {
"type": "git",
"url": "https://github.com/technote-space/jquery.marker-animation.git"
},
"keywords": [
"jquery-plugin",
"marker animation"
],
"author": "technote",
"bugs": {
"url": "https://github.com/technote-space/jquery.marker-animation/issues"
},
"homepage": "https://github.com/technote-space/jquery.marker-animation#readme",
"license": "GPL-3.0",
"dependencies": {
"jquery-inview": "^1.1.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-register": "^6.26.0",
"eslint": "^5.9.0",
"istanbul": "^0.4.3",
"jquery": "^3.3.1",
"jsdom": "13.0.0",
"mocha": "^5.2.0",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2"
}
}

npmのversionコマンドで連携されるようにgitの設定を追加しました。
npm version patch

上記コマンドでパッケージのバージョンアップとコミット、タグの作成を行ってくれるようになります。

テストと構文チェックは以下を参考にしました。


webpackの設定


対象のJSファイルの指定や複数のモジュールパターンへの対応(umd)を行うための設定などを行いました。
const webpack = require('webpack');
const p = require('./package');

const banner = `${p.name} ${p.version} - ${p.description}\nCopyright (c) ${ new Date().getFullYear() } ${p.author} - ${p.homepage}\nLicense: ${p.license}`;

const webpackConfig = {
'context': __dirname + '/src',
'entry': './index.js',
'output': {
'path': __dirname,
'filename': `${p.name}.min.js`,
'library': `markerAnimation`,
'libraryTarget': 'umd'
},
'module': {
'rules': [{
'test': /\.js$/,
'exclude': /node_modules/,
'loader': 'babel-loader'
}]
},
externals: {
jquery: {
root: 'jQuery',
commonjs2: 'jquery',
commonjs: 'jquery',
amd: 'jquery'
}
},
'plugins': [
new webpack.BannerPlugin(banner)
]
};

module.exports = webpackConfig;

package.jsonの値を使用してコピーライトやライセンス情報も出力されるようにしています。

モジュールパターンに関しては以下のページで理解しました。



「externals」は外部のjQueryを使用するために必要な設定です。

その他の設定


BabelやESLintのための設定も必要です。

ここまででようやく実装前に必要な設定が終わりです。

PHPに比べてテストフレームワークなどで取りうる選択肢が多く、準備までが大変だと感じました。

実際の機能を実装


実装のときにはumdパターンなどを気にする必要はありません。

それはwebpackがやってくれます。

jQueryプラグインなのでjQueryを使用できるようにする必要がありますが、外部のjQueryを使用する際も
import $ from 'jquery';

でimportするだけです。

webpackで設定されたlibraryTargetやexternalsによって、npmパッケージとして使用される場合や
<script type="text/javascript" src="/assets/jquery.marker-animation.min.js"></script>

のように読み込まれて使用される場合などでもいい感じにjQueryが使用されるようにビルドしてくれます。

今回は別のjQueryプラグインを使用してjQueryに機能を追加したため、以下のようなコードになりました。
require('jquery-inview');
import $ from 'jquery';

$.fn.markerAnimation = function (...args) {
return this.each(function () {
const target = $(this);
....

});
};

ビルド


npm run build

でpackage.jsonに設定したbuildスクリプトが実行されます。
webpack --mode production

パッケージの登録


不要なファイルの除外設定


.npmignoreファイルでパッケージに不要なファイル(node_modulesなど)を除外しておきます。

npmユーザの登録


npm <span class="nb">set </span>init.author.name "名前"
npm <span class="nb">set </span>init.author.email "メールアドレス"
npm <span class="nb">set </span>init.author.url "URL"

npm adduser

パッケージ登録


npm publish

これだけでパッケージが登録され公開状態になりました。



コマンドだけでユーザ登録とパッケージ登録が完了するのは少し驚きました。

まとめ


jQueryプラグインの作成」「npmパッケージ」のどちらも今回初めて行いました。

普段はサーバサイドの開発ばかりなので、実装までの準備で結構時間を使ってしまいました。

ただ、自分で作ったものが普段利用しているサービスで公開されるのはモチベーションアップに繋がると感じました。

今後もいろいろ作っていきたいと思います。

Makefile で 動的にコマンドを変える方法
next article
arrow