LoginSignup
39

More than 5 years have passed since last update.

jspmで始めるES6生活

Last updated at Posted at 2015-03-24

jspm は npm + bower + requirejs 的なパッケージマネージャなのだけど、標準で traceur または babel (init 時にどちらか選べる)がバンドルされ、systemjs を介して es6-module-loader も有効になるので、ES6 生活を始めるのに便利そう。話題の Aurelia.js も、ES6対応のための標準ライブラリとしてjspmを活用している。

非常に初歩の初歩の取っ掛かりだけど、JavaScript Modules and Dependencies with jspm を参考に、会社で使っている bacon.js と、そのプラグインの bacon.matchers を jspm でインストールして、ES6ベースの code から呼び出すところまでやってみた。

jspm のインストール

$ npm install -g jspm

素のまま使っていると github の API アクセス数制限に引っかかってしまうので、下記コマンドで github の API トークンを登録する。

$ jspm registry config github

デフォルトの設定でひな形を作成

$ jspm init
Package.json file does not exist, create it? [yes]:
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:
Enter project code folder [./]:
Enter jspm packages folder [./jspm_packages]:
Enter config file path [./config.js]:
Configuration file config.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Which ES6 transpiler would you like to use, Traceur or Babel? [traceur]:

差分が分かりやすいように git init しておく。

$ git init
$ echo jspm_packages > .gitignore   # jspm_packages ディレクトリを無視
$ git add .
$ git commit -m "initial commit"

jQuery, lodash のインストール

jQuery は registry に alias が登録されているので、下記のような簡易記法でインストールできる。

$ jspm install jquery

lodash も同じように書けるけど、あえて省略しない記法でインストールしてみる。

$ jspm install "lodash=npm:lodash"

package は npm または github からインストール可能。github の場合は、github:username/repository の書式でインストールする。

そうすると、差分はこんな感じ。

diff --git a/config.js b/config.js
index 169c694..5308c6d 100644
--- a/config.js
+++ b/config.js
@@ -1,7 +1,22 @@
 System.config({
   "baseURL": "/",
   "paths": {
-    "*": "*.js"
+    "*": "*.js",
+    "github:*": "jspm_packages/github/*.js",
+    "npm:*": "jspm_packages/npm/*.js"
+  }
+});
+
+System.config({
+  "map": {
+    "jquery": "github:components/jquery@2.1.3",
+    "lodash": "npm:lodash@3.5.0",
+    "github:jspm/nodelibs-process@0.1.1": {
+      "process": "npm:process@0.10.1"
+    },
+    "npm:lodash@3.5.0": {
+      "process": "github:jspm/nodelibs-process@0.1.1"
+    }
   }
 });

diff --git a/package.json b/package.json
index bfaf751..f7073f1 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,10 @@
     "directories": {
       "lib": ".",
       "packages": "jspm_packages"
+    },
+    "dependencies": {
+      "jquery": "github:components/jquery@^2.1.3",
+      "lodash": "npm:lodash@^3.5.0"
     }
   }
 }

jspm_packages ディレクトリには、当然、jquery と lodash がインストールされている。

ここで一旦コミットしておく。

index.html と app.js を実装

JavaScript Modules and Dependencies with jspm を参考に index.html と app.js を実装。

<!DOCTYPE html>
<html>
  <head>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
     System.import('./app');
    </script>
  </head>
  <body>
  </body>
</html>
import $ from 'jquery';
import _ from 'lodash';

console.log("jQuery version: " + $.fn.jquery);
console.log("lodash version: " + _.VERSION);

この状態で、何かしらの web server でこのディレクトリを駆動する。python に慣れているので下記のようにしたけど、node でも apache でも nginx でも何でも良いです。

$ python -m SimpleHTTPServer

この状態で localhost:8000 にアクセスすると、 developer console に

jQuery version: 2.1.3
lodash version: 3.5.0

などと表示されます。なお、import 構文についてはまだ勉強不足なのだけど、$_ は、それでなくても何でも良い感じです。

ここで一旦 git commit.

bacon.js, bacon.matchers をインストール

bacon.js も registry に登録されているので alias 名でインストール。

$ jspm install baconjs

bacon.matchers は、現時点ではまだ registry に登録されていない(pull request 出しときました)ので、省略しない書き方で npm からインストール

$ jspm install "bacon-matchers=npm:bacon.matchers" 

そうするとですねー、下記のように、bacon.matchers が古いバージョンの bacon.js を参照しちゃうわけですね、はい。

diff --git a/config.js b/config.js
index 5308c6d..b77bd66 100644
--- a/config.js
+++ b/config.js
@@ -9,13 +9,59 @@ System.config({

 System.config({
   "map": {
+    "bacon-matchers": "npm:bacon.matchers@0.4.0",
+    "baconjs": "npm:baconjs@0.7.53",
     "jquery": "github:components/jquery@2.1.3",
     "lodash": "npm:lodash@3.5.0",
... (中略)
+    "npm:bacon.matchers@0.4.0": {
+      "baconjs": "npm:baconjs@0.7.6"
+    },
+    "npm:baconjs@0.7.53": {
+      "assert": "github:jspm/nodelibs-assert@0.1.0",
+      "buffer": "github:jspm/nodelibs-buffer@0.1.0",
+      "fs": "github:jspm/nodelibs-fs@0.1.2",
+      "path": "github:jspm/nodelibs-path@0.1.0",
+      "process": "github:jspm/nodelibs-process@0.1.1"
+    },
+    "npm:baconjs@0.7.6": {
+      "buffer": "github:jspm/nodelibs-buffer@0.1.0",
+      "process": "github:jspm/nodelibs-process@0.1.1"
+    },
... (中略)

diff --git a/package.json b/package.json
index f7073f1..28e3364 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
       "packages": "jspm_packages"
     },
     "dependencies": {
+      "bacon-matchers": "npm:bacon.matchers@^0.4.0",
+      "baconjs": "npm:baconjs@^0.7.53",
       "jquery": "github:components/jquery@^2.1.3",
       "lodash": "npm:lodash@^3.5.0"
     }

bacon.matchers には、プラグインとしての立場(Bacon オブジェクトに追加のメソッドを付与する)的に、同じバージョンの bacon.js を参照してくれないと困るので、config.js を書き換えます。(この辺りは、もろもろ試行錯誤の末にたどり着きました)

     "npm:bacon.matchers@0.4.0": {
-      "baconjs": "npm:baconjs@0.7.6"
+      "baconjs": "npm:baconjs@0.7.53"
     },

app.js から Bacon を呼び出す

最後に、app.js に Bacon 関連のロジックを追加します。こんな感じ。

import $ from 'jquery';
import _ from 'lodash';
import Bacon from 'baconjs';
import "bacon-matchers";

console.log("jQuery version: " + $.fn.jquery);
console.log("lodash version: " + _.VERSION);

Bacon.fromArray(["Bacon","Lettus","Tomato"]).where().equalTo("Bacon").assign(console, "log");

先ほどと同じように web server で駆動して、ブラウザの developer console に

jQuery version: 2.1.3
lodash version: 3.5.0
Bacon

と表示されたら成功です。

まとめ

import までしかやりませんでしたが、app.js では ES6 が書けるわけで、既存のライブラリを活用しながら ES6 を開発する環境として、申し分ないな、と思いました。production で使うためのワークフローとかは、公式ドキュメントにまとまっています。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39