Bundler #1

JavaScriptのコードはモジュールに分けて開発することが一般的です。
ブラウザにおいて、一つずつ<script>タグでモジュールをロードするのはラウンドトリップやコネクションの問題が発生します。

そのため、多くの場合ブラウザ向けのコードはモジュールをまとめた(bundleした)ファイルを作成して配信します。

その際にモジュールの依存関係などを解決しながらファイルをまとめる"bundler"と呼ばれるツールの動きについてのレポートです。

webpack 2

Release v2.2.0 · webpack/webpack

webpack 2が正式にリリースされています。

2017-01-24のJS: webpack 2正式リリース、JavaScriptの開発環境設定、2016 JS Stars - JSer.infoで紹介しました。

webpack 2のドキュメントは webpack.js.org/ の新しいサイトの方にまとめられています。

Migrating from v1 to v2にマイグレーションガイドがあります。

一部設定の名前が変更されていたり、json-loaderがデフォルトとなっていたり既存のconfigを変更する参考になると思います。

今後の機能追加や改善については、投票ツールを通じて決定していくようです。
(投票の重み付けに利用されているOpen Collectiveについてのスライドを書いたので、併せてみるといいかもしれません)

https://webpack.js.org/vote/

投票のサイトを見ると今のところ次の開発候補としてはScope Hoisting(Rollupインスパイアな最適化)、Typescript周りの改善などが上がっているようです。

Fusebox

Fuseboxという新しいBundlerツールが登場しました。
実際に試してみると、初回のビルドと再ビルド(.fuseboxのキャッシュあり)どちらも高速です。

2017-01-04のJS: PostCSS概要、Chrome開発者ツール、FuseBox - JSer.info で紹介しました。

基本的に設定はJavaScriptのコードとして書くようになっていて、nodeで実行するだけです。

また、webpackのように設定としてentryポイントを設定するのではなく、ビルドの設定をするFuseBox.initと実際にbudnleするものを決めるfuse.bundleメソッドで分かれています。

const FuseBox = require("fusebox").FuseBox
let fuse = FuseBox.init({
    homeDir: "src/",
    globals: { default: "myLib"},
    outFile: "./out.js"
});

fuse.bundle(">index.js");

そのためコードとして設定を書くgulpとは相性がいいため、公式のサンプルでもgulp内に書いている例を見かけます。

angular2-example/gulpfile.js at master · fuse-box/angular2-example

Rollup

大きな変化はありませんが、Rollupは順調に開発中です。
次のIssueも併せてみると面白いかもしれません。

Use minified version of React by gaearon · Pull Request #10 · GoogleChrome/sample-framework-boot

Browserify

Browserify自体を機能追加/改善するアップデートはあまり積極的に行われていません。
@substack以外にPRをマージするOwnerがいないことに起因しています。

元々本体に多くの機能があるわけではなく依存するパッケージに機能が分散しています。
しかし、その依存のアップデートが滞りがちです。
Issue/PRにはNode.js v6>=で追加されたDeprecated Warningや依存するパッケージのDeprecated Warningを解消する些細なものが多く並んでいます。

先日、14.0.0がリリースされました。
このリリースでは、Browserifyが利用するbufferのpolyfillであるfeross/bufferがアップデートされています。
TypedArrayを使う実装になったため、bufferを含んだコードを変換した場合に、IE10以下では動かなくなります。

IE10以下でも動くようにしたい場合は、古いfeross/bufferを利用する必要があります。

$ npm install buffer@4 --save
$ browserify -r buffer/:buffer main.js > bundle.js

ES modules

MSEdgeとWebKitにES modules(<script type="module">)が実装されています。

Release Notes for Safari Technology Preview 21 | WebKit

ES modulesとNode.js modulesについては細かな挙動の違いなどが存在します。
詳しくは次の記事を読むと良いです。

webpack 2やrollupなどはES modulesのコードを直接扱うようになっています。
ES modulesのブラウザ実装が進むにつれ、ES modulesを扱うツールなども増えてくることが予想されます。
Bundlerはそこへ直接関係するツールであるため、今後の動きに注目していく必要があります。

Testing Framework #3

JavaScriptのテスティングフレームワーク周りのレポートです。

MochaがContributorを募集

Mocha needs YOU!
-- https://github.com/mochajs/mocha#mocha-needs-you

Mochaのメンテナンスリソースが足りていないため協力を募集する内容がREADMEにかかれています。
IssueやPull Requestのレビューをしてくれる人やMochaへのテストの追加などをコントリビューションを募集しています。

詳しくはProjectsを見るかGitterでやり取りすると良さそうです。

mochajs/mocha - Gitter

Sinon.js 2.0へ向けて

Sinon.JS が2.0向けての作業が進められています。
タスクについては次のIssueで管理されています。

Sinon 2.0 Release · Issue #966 · sinonjs/sinon

The much fabled 2.0 release, that will split Sinon.JS into more modules, tidy up the api, simplify all the dependency boilerplate by using Browserify.
-- 2.0 Milestone

とあるように、(CommonJS)モジュールとして管理されていなかったのを大きくリファクタリングし、それぞれがモジュール化されています。
残りのタスクにはドキュメント系となっているため、そこまで遠くない日に2.0がリリースされるかもしれません。
プレリリース版は既に公開されています。