Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
39
Help us understand the problem. What is going on with this article?
@ledmonster

jspmで始めるES6生活

More than 5 years have passed since last update.

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 で使うためのワークフローとかは、公式ドキュメントにまとまっています。

39
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
groove-x
世界のどこにもない、心を満たすロボットを。私たちGROOVE Xは2015年に設立したスタートアップです。私たちの考えるロボットは、人々の生活に潤いを与える存在として、人が一緒にいたくなるような新世代の家庭用ロボットです。便利さや機能性ではなく、家族や伴侶として愛される存在になれるかどうか。 GROOVE Xが追求するのはあなたの感性の領域に訴えるロボットです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
39
Help us understand the problem. What is going on with this article?