バベりバベられた日

BabelJs

2015年2月15日、Firefox OS WoTハッカソンの懇親会で衝撃を受けた。

ハッカソンとは全く関係ないんだけども、普段アプリを作るのに使っている6to5のブログでNot Born to Dieと言う記事が上げられた。

ざっくり約

最新の情報として、6to5の行ったとても大きな事をブログに上げます。

まだ目標には全く達していないが、6to5と6to5-coreは数日中に50万ダウンロードを達成すると考えている。
そして、月末には百万をこえる回数になると予想している。

その理由の大部分は、名前に起因していると考えています。
これまでの6to5は、名前のせいで本来の役割と異なった名前がJavaScriptコミュニティーにたいしてすこしばかりの混乱を与えていました。

そもそも6to5は死ぬ為に生まれていません。

次世代のJavaScriptはすべての環境でサポートされていても、6to5の入った作品はコミュニティーでも重要な役割を果たして行きます。

ミニファイ、難読化、lint、コードカバレッジ計測、AltJSへのコンパイル、構文拡張、コードハイライトと様々ですが、殆どのプログラミング言語が依存する2つのツールがあります、それがparserやtranspilerです。

JavaScriptにおけるこれらのツールの歴史は長く、悲しい道のりでした。
常に誰もが同じ物を再構築し、確かな混乱を作ってきました。
また、一つの新しい言語仕様を展開するまでにとても長い時間がかかりました。
(つまり「Arrow Functionsが大好きだが、そいつが我々のコードカバレッジ計測を破壊する」という話)

幸いにも多くの作業は、この問題を改善するために行われています。

Mozilla, Esprima, Jquery財団, Acorn, 6to5, ESLint等の人々が、最近になりESTreeを作成する為に集まっています。
これはすべてのparserとtranspilerツールの基盤かつ標準となるべき存在です。

我々6to5はtranspilerのストーリーを解決していきたい。

コミュニティーがここに集結して、多くの問題を共有し対処する事が出来れば、強固な基盤を作る事が出来るようになる筈です。

これは馬鹿げた考えで、とても驕り高い目標かもしれません。

そもそもは、「6to5」という名前じたいが、その目的の適用範囲外だと考えます。

なので、我々はプロジェクトの名前を変更する事を良い考えだと思いました!

6to5は今Babelという名前です。

babelは常に最新の標準を使用する為のJavaScript transpilerとして役立ちつつけます。
それだけでなく、他のツールの為のにも様々なAPIを用意し始めます。

babelをプロジェクトで使っていく誰もが、信じられないほど作業がしやすくなります。

そして我々は、JavaScriptコミュニティーに大きな影響を与える事ができると信じ、驚くほどわくわくしています。

だから、常にJavaScriptへの挑戦をし続ける。

— The recently Babel team

終わりに

6to5を単なるES6 polyfillと考えていた自分が恥ずかしいと言う思いとともにこのBabelJSの持つ思想は凄い共感を覚えた。

今後ESTreeの動向に、目を離せない自分が居る。

jspmを使ってみる

  • jspm ver 0.11.2のお話です

jspm

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

jspm をインストールする

1
npm install jspm -g

jspm initで初期化する

コマンドはjspm initpackage.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リファレンス翻訳&査読会でもひらきたいな。