ES6 の Project Skeleton (6to5 + browserify + power-assert) を作ってみた

かめ板 es6-Kameita

• ahomu/es6-Kameita

es6-Kameita は ECMAScript 6 で JavaScript ライブラリを開発するためのプロジェクトスケルトン（テンプレート）です。初期設定はブラウザ向けですが、Nodeモジュールにも対応します。

6to5 でトランスパイルされたコードを Browserify でビルドし、mocha + power-assert でテストを実行します。Browserify を採用しているため、初期状態では bower に依存せず npm を活かしています。

経緯

6to5/6to5 がリリースされて以来、しばらく手元で ES6 を使い続けていたので、ぼちぼち開発の構成を固めてしまいたいなと思った次第。

最初は GianlucaGuarini/es6-project-starter-kit を fork して何とかしようと思いましたが、RequireJS でアレしてる時点から今の気分と合わなかったので ahomu/Claylump の構成をスケルトン化しました。

使い方

そんなに機能を入れていない ( gulpfile.js を過度に拡張したくなかった ) ので、必要な機能は自分で足すスタイル。

インストール

git clone https://github.com/ahomu/es6-Kameita.git ./your-project
cd ./your-project
rm -rf .git
npm install

主要コマンド

# ビルド
npm run build

# 開発モード (watch的な)
npm run devel

# テスト実行
npm test

依存ライブラリ

es6-Kameita は次のライブラリ群に依存しています。

• 6to5/6to5
• substack/node-browserify
• gulpjs/gulp
• airportyh/testem
• mochajs/mocha
• twada/power-assert
• cjohansen/Sinon.JS

gulp を利用していますが、基本的なインターフェースは npm run * にまとめています。 正直、6to5+ browserify+power-assert の組み合わせ方にこなれていない感じなので、奇特な方のPRお待ちしています。

/* index.js */
import runtime from '6to5/runtime';
import polyfill from '6to5/browser-polyfill';

/* part of gulpfile.js */
return browserify(filename, {
        standalone : standaloneName,
        debug      : true,
        noParse    : [require.resolve('6to5/browser-polyfill')]
      })
      .transform(to5ify.configure({
        experimental : false,
        runtime      : true
      }))
      .bundle()

6to5/runtime.js と 6to5/browser-polyfill.js をいいかんじに混ぜ込んで browserify ビルドできる感じになったのは満足してます。gulpfile.js に 6to5 の experimental と runtime オプションも露出させてあります。

testem 抜きたい気がするけど、karma もウーンって感じです。coverage ツールとの統合も課題。

なぜ 6to5 なのか

Traceur requires quite a bulky runtime (~75KB) and produces quite verbose code. While this can be trimmed down by selectively building the runtime, it's an unneccesary step when a large runtime can be eliminated entirely. 6to5 · Differences

主な比較対象はやはり Traceur になる気がしますが、6to5 · Differences に書いてることが理由になりえるのかと思います。6to5 は出力コードがクリーンで良いですね。

あと最初のほうに Fix typo writable by ahomu · Pull Request #59 · 6to5/6to5 でわずかながら貢献しましたので！

実はTraceurをまともに使ったことはなくて、出力結果みて引いてしまっただけなので何卒免責(・ｘ・)

なぜ power-assert なのか

power-assertは紳士のたしなみ

— あほむ@禁酒という禊 (@ahomu) December 16, 2014

はい。

よかったら触ってみてください

くだしあ！ ES6使ってみよう系はこちらもおすすめ。

ちなみに、かめ板とは 陶芸.com/ろくろ/カメ板・芯出し用具 みたいなものらしいです

---