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

プログラミング

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

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

表示されるとマーカーで線を引くようなアニメーションが開始されます。

一度画面から外れた後に再び表示されたときに再度アニメーションを行うようにもできます

マーカーの色も自由に設定できます。

マーカーの色も自由に設定できます。

文字を太くしないことも可能です。

ゆっくり塗ることもできますし、少し遅れてアニメーションを開始することもできます

リセット

マーカーアニメーションをjQueryプラグイン化してみた
画面に表示されたときにマーカー(蛍光ペン)で線を引くようなアニメーションを付けるjQueryプラグインを作成しました。動作例表示されるとマーカーで線を引くようなアニメーションが開始されます。一度画面から外れた後に再び表示されたときに再度アニ

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

環境はmacです。

最終的な成果物

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

technote-space/jquery.marker-animation
Marker animation jQuery plugin. Contribute to technote-space/jquery.marker-animation development by creating an account on GitHub.

構成

  • 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

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

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

ぼくのかんがえたさいきょうのnpm test - Qiita
この記事は自身への備忘録と共にテスト駆動するのに便利なんじゃないかという普段使う`npm test`の中身を簡単な説明付きで書きます。 対象は気軽にテストをしながらサーバで直接開発したい人向け。 タスクランナーとかには触りませんがう...

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の値を使用してコピーライトやライセンス情報も出力されるようにしています。

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

[意訳]初学者のためのJavaScriptモジュール講座 Part1 - Qiita
このポストは以下の記事を、(意訳したものです。 [JavaScript Modules: A Be...

「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 set init.author.name "名前"
npm set init.author.email "メールアドレス"
npm set init.author.url "URL"
npm adduser

パッケージ登録

npm publish

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

jquery.marker-animation
Marker animation jQuery plugin

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

まとめ

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

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

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

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

コメント