もう、jQueryはnpmで管理しようぜ

背景

jQueryとか、js関連のファイル、どうやって管理してますか？
公式サイトからjsファイルダウンロードして使ってますか？
それ、サーバにアップロードして使ってますか？
バージョン管理どうしてますか？
ディレクトリにバージョン番号書いて管理してますか？

面倒くせぇ・・！

って思いませんか？

時代は変化してます。

もう、js関連のライブラリはnpmで管理する時代になりました。
jQueryの公式サイトでも、npmかbowerを使ってインストールしよう。という説明があります。

この流れの変化、ついてこれてますか？

・・・

私はつい先日まで、冒頭で話したファイルダウンロード形式の管理でした。
jsもhtmlファイルのbodyの最後にベタ書きでした。

それを卒業したので、備忘録的に書いておきます

1. nodeをインストール

と、言っても、nodeはガンガン開発されており、バージョンがすぐに上がります。
バージョン固定で入れるのも面倒なので、好きなバージョンのnodeを使えるnvmというやつを使いましょう。

$ git clone https://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh

利用可能なバージョンを探す

$ nvm ls-remote
        v0.1.14
        v0.1.15
        v0.1.16
        v0.1.17
        v0.1.18
        v0.1.19
        v0.1.20
        v0.1.21
        v0.1.22
        v0.1.23
        v0.1.24
        v0.1.25
        v0.1.26
        v0.1.27
        v0.1.28
        v0.1.29
        v0.1.30
        v0.1.31
        v0.1.32
        v0.1.33
        v0.1.90
ずらぁーーー

v0.12.15 をインストールしてみます。

$ nvm install 0.12.15
Now using node v0.12.15 (npm v2.15.1)
Creating default alias: default -> 0.12.15 (-> v0.12.15)
node -v
v0.12.15

完

バージョンを切り替えるのは

nvm use [バージョン番号] で切り替えれます。

2. npmの初期化

$ npm init
対話形式で色々聞かれるが、とりあえず全部Enter！でOK

すると、同じディレクトリの中にpackage.jsonが出来てます。

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

さっき対話形式で答えた内容で作ってくれるみたいです。

3. お待ちかねのjQueryインストール

$ npm install jquery --save

今度はnode_modulesというディレクトリができているはずです。
この中にjqueryが入ってます。

色々入ってますが、いつも使ってるjqueryファイルは、node_modules/jquery/dist/の中に入ってます。

さらに、package.jsonにはどのバージョンを入れたかという情報を勝手に書いてくれてます。

  "dependencies": {
    "jquery": "^3.1.0"
  }

この3.1.0の前の^(キャレット)は「パッチバージョンで最新のものをインストールする」という意味です。
詳しくは、以前かいた記事で、セマンティックバージョンについて解説しているので参考にしてみてください。

ここで、node_modules/jquery/dist/配下のjsファイルを使って管理できればレベル1はクリアです。

4. せっかくなのでnodeで書いてみよう

もう、jquery書くときに、いちいち↓のように書くのも面倒じゃないですか。

<script type="text/javascript" src="jQueryのパス"></script>
<script type="text/javascript" src="script.js"></script>

script.js

'use strict';

var $ = require('jQuery');

$(function() {
  $('h1').css('color', 'red');
  $('h1').click(function({
    alert('hello')
  });
})

jsで出来なかった、requireを実現出来てます。
但し、このままではブラウザが理解できないので、ブラウザが理解出来る形式に変換する必要があります。
それを可能にするのがbrowserifyです。

browserifyのインストール

$ npm i -D browserify
$ $(npm bin)/browserify script.js -o /var/www/html/script.js

($npm bin)で、npmのバイナリファイルが入ってるパスを返してくれます。
グローバルにインストールしない場合、いちいちパス指定してられないですしね。

これで、html側は、下記のようにするだけでOKです。

<script type="text/javascript" src="script.js"></script>

楽ちんですね。