jspmを使ってみる

  • jspm ver 0.11.2のお話です

jspm

仕事で使うのはオールインワンなWebpackが手軽だっけど、ES6を意識したモジュール管理の学習＆慣れを目的にjspmを使い始めてみた。

jspm をインストールする

1
npm install jspm -g

jspm initで初期化する

コマンドはjspm initでpackage.jsonに"jspm"prefixが追加される（無ければ作られる）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$ jspm init
# package.jsonが無いので作りますか？
Package.json file does not exist, create it? [yes]: yes
# package.json のプレフィックスにjspmを含めますか？
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]: yes 
# プロジェクト名は？
Enter a name for the project (optional): gulpjspm
# baseURLとして使うフォルダ名は？
Enter baseURL (public folder) path [.]: client
# プロジェクトのコードをおさめるフォルダは？
Enter project code folder [client/lib]: client/app   
# jspmでパッケージ管理されるフォルダは？
# このフォルダにある物は.gitignoreに入れても良い、jspm installで復元される
Enter jspm packages folder [client/jspm_packages]: 
# 設定ファイルを作りますか？
Enter config file path [client/config.js]: 
Configuration file client/config.js doesn't exist, create it? [yes]: 
ok   The gulpjspm/* path has been set to app/*.js.
     To alter this path, set the directories.lib in the package.json or run jspm init -p to set the code folder.
# ES6コンパイラはどちらを使いますか? Traceur または 6to5
Which ES6 transpiler would you like to use, Traceur or 6to5? [traceur]:     
ok   Verified package.json at package.json
     Verified config file at client/config.js
     Looking up loader files...
       traceur-runtime.js

チュートリアル

個人的にチュートリアルでおおっと思った部分を。

jspm構築マニュアル

1
2
3
4
jspm install npm:lodash-node
jspm install github:components/jquery
jspm install jquery
jspm install myname=npm:underscore

の結果は以下のようなディレクトリ構成になる
ぱっと見た感じjspm install パッケージサブフォルダ:ライブラリという形っぽい

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
├── config.js
├── jspm_packages
│   ├── es6-module-loader.js
│   ├── es6-module-loader.js.map
│   ├── es6-module-loader.src.js
│   ├── github
│   │   ├── components
│   │   │   ├── jquery@2.1.3
│   │   │   └── jquery@2.1.3.js
│   │   └── jspm
│   │       ├── nodelibs-process@0.1.0
│   │       └── nodelibs-process@0.1.0.js
│   ├── npm
│   │   ├── lodash-node@3.0.1
│   │   ├── lodash-node@3.0.1.js
│   │   ├── process@0.10.0
│   │   ├── process@0.10.0.js
│   │   ├── underscore@1.7.0
│   │   └── underscore@1.7.0.js
│   ├── system.js
│   ├── system.js.map
│   ├── system.src.js
│   ├── traceur-runtime.js
│   ├── traceur-runtime.js.map
│   ├── traceur-runtime.src.js
│   ├── traceur.js
│   ├── traceur.js.map
│   └── traceur.src.js
└── package.json

jspm_packagesフォルダにインストールされる、bower_componentっぽい

パッケージ管理の仕組み

よく使うコマンドをとりあえずメモる。

結合

以下のコマンドで関連するモジュールを結合する

1
jspm bundle app/main build.js

install

pconfig.jsに登録する

1
jspm install パッケージ名

inject

JSライブラリをjspm_packagesにダウンロードしつつ、config.jsに設定する
下で紹介するjspm setmodeを使う事で、リモート(CDN)/ローカルインストール参照を切り替えれる。

1
jspm inject パッケージ

CDNの切り替え(リモート or ローカル)

以下のコマンドで、リモート(githubリポジトリとか)参照するのか、ローカルのjspm_packagesを参照するのかを切り替える事が出来る。

CDNを参照する設定

1
jspm setmode remote

jspm_packagesローカルファイルを使う設定

1
jspm setmode local

インストール、注入されたパッケージの更新確認

jspmのパッケージを必要に応じて最新にする

1
jspm update

とりあえず

パッケージ管理や最低限の開発タスクが入ったモダンなbowerって感じがする。

ちょっとプロトタイプで使ってみた感じ、モジュール管理や開発フロー全般がすごいシンプルになったのと、個人的に考えていたES6を意識したアプリの構築にぴったりで、思った以上に好きになれた。

コンパクトで取り回しが良く、個人的にはbowerやWebpackよりも好きになれそう。

調べているなかで、なるほどと思えた記事も紹介「JSPMとWebpackの比較」参考までに

あと参考になった日本語の記事

どっかで　jspmリファレンス翻訳＆査読会でもひらきたいな。