新卒でも３週間でできるnpmモジュール #JavaScript

npmモジュールを作成したら意外とダウンロードの伸びが良かったので、調子に乗って、参考になったサイトや詳細をまとめて投稿いたします。

まずはこれ

3分でできるnpmモジュール
 3時間でできるnpmモジュール
- npmアカウントの作成
- npmモジュールの御膳たて（各ファイルの準備）
- mochaを用いたテスト

１週間目：環境構築

mochaを用いたテスト

３時間でできるnpmモジュールで紹介されていますが、もう少し噛み砕きます。

npmモジュールとして公開する前に、動作確認するためのモジュールです。

導入は、下記コマンドを打ったのち、

npm i mocha

package.jsonで下記のように記述し、npm run testを打てば動作します。

{
  "scripts": {
    "test": "mocha -R spec"
  }
}

他に設定は不要だが、testディレクトリ配下にmain.jsを作成し、このjsに処理を書いていく必要がある。

test
｜＿main.js

main.jsでの動作確認ができたところで、

cliのモジュールならルートディレクトリ直下（任意）のindex.js、

gruntのプラグインならtasksディレクトリ配下のsample.jsに処理を書き写してアップすることになる。

cliならbinの設定,gruntならkeywodsの設定が必要。

my-module
  |--tasks
  |   |_sample.js <-grunt
  |
  |--test
  |  |_main.js <-mochaによるテスト
  |
  |--index.js  <-cli
  |--package.json
〜〜〜〜〜〜〜
〜〜〜〜〜〜〜

２週間目：実装

とりあえず、main.jsに記載していく。

Node.jsのリファレンスとしては、このサイトにかなりお世話になっていく。一応、日本語リファレンスもあるがオススメしない・・・

何を作るかによるが、filesystem, path, streamあたりを使用したモジュールが最初は作成しやすいのではないでしょうか。

Node.jsは、非同期での処理を繋げていくことで軽量なモジュールを作成できることが特徴らしいです。

3週間目：公開

1.grunt pluginとして公開する場合、package.jsonのkeywodsにgruntpluginと追加しましょう。
また、対象ディレクトリなどユーザーに任意に推定してもらうところは、下記のようにgrunt.initConfigにて登録し、grunt.config()で取得します。
※Gruntfile.jsは、あくまでユーザが任意で設定するものなので、公開するだけなら作成しなくて良い。sample.js内にgrunt.initConfigを記載する必要もない。

Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    search: {
      dir: 'dist'
    }
  });
  // プラグインのロード
  grunt.loadNpmTasks('class-search');

  //タスクの登録
  grunt.registerTask('default', ['class-search']);
};

sample.js

module.exports = function (grunt) {

  grunt.registerTask('class-search', function () {
    const fs = require('fs');
    const path = require('path');
    const dirPath = grunt.config('search').dir;
   }
}

2.CIツールの一つであるTravis CIを使用するなら、３時間でできるnpmモジュールが参考になりますが、１点注意事項があります。

travis.yml

language: node_js
node_js:
  - 0.10

このように記載されていますが、nodeのバージョンが古く、mochaが正常にビルドせず、travis ciを通過できません。

SyntaxError: Use of const in strict mode.

- 0.10　を別の新しいバーションに変更しましょう。

3.初めてのnpm パッケージ公開
「npmに公開」らへんからとても参考になります。（バージョンの上げ方知らずに手動でpackage.jsonのversion変更してた・・・）

https://www.npmjs.com/package/class-search
他にも参考にしたサイトは思い出し次第追記していきます。