Fork me on GitHub

JSerレポート #1 Bundlerの未来、テスティングフレームワークの現状

Edit on GitHub 編集履歴を見る

JSer.infoでは不定期でレポートという形で、特定のテーマに関する状況をまとめています。

レポートなどの更新情報を知りたい方はRSSTwitter@jser_infoをフォローしてみてください。

Bundler #1

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

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

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

webpack 2

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

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

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

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

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

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

Fusebox

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

基本的に設定は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内に書いている例を見かけます。

Rollup

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

Browserify

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

node-browserify 2017-01-31 19-47-37

元々本体に多くの機能があるわけではなく依存するパッケージに機能が分散しています。
しかし、その依存のアップデートが滞りがちです。
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">)が実装されています。

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でやり取りすると良さそうです。

Sinon.js 2.0へ向けて

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

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がリリースされるかもしれません。
プレリリース版は既に公開されています。

2016 JavaScript Rising Stars

JavaScriptに関するツールやライブラリのStar増加率をまとめたサイトにおいて、Testing Frameworksについてもまとめられています。
2016年はAVAJestのStar数が伸びているようです。

AVA will introduce Magic assert

テストフレームワークのAVApower-assertを内部的に利用しテスト結果を表示することができます。
現在、そのテスト結果の表示をより分かりやすくしようとmagic-assertという名前で開発がされています。

magic-assert


JSer.infoでは不定期でレポートという形で、特定のテーマに関する状況をまとめています。

レポートなどの更新情報を知りたい方はRSSTwitter@jser_infoをフォローしてみてください。


follow us in feedly

この記事へ修正リクエストをする
記事を紹介する