Webpackよりも速いと言われるFuseBoxを使ってみる
FuseBoxを使ってみる
以前、WBJでWebpackより高速であるとFuseBoxが紹介されていました。 そのWBJの記事をもとにチュートリアル的なことをやってみたいと思います。
FuseBoxとは
公式によると「WebpackとJSPM、SystemJSを組み合わせたバンドルモジュール」と紹介されています また、Webpack等のバンドルモジュールよりも高速であるとも書かれています。
なんとなくですが気が惹かれたので使ってみたいと思います。
事前準備
node、npmが使える状態にしておいてください。
インストール
まず、プロジェクトディレクトリを作ります
mkdir FuseBox cd FuseBox
package.jsを作成します。
npm init -y
パッケージのインストール
npm install fuse-box -D
各種ファイルを作る
まずはじめに設定ファイルを作成していきます。 ファイル名はfuse.jsです。
const {FuseBox} = require("fuse-box");
const fuse = FuseBox.init({
homeDir:"src",
output:"dist/$name.js"
});
fuse.bundle("app").instructions("> index.js");
fuse.run();
次に簡単なアプリケーションを書いていきます。 srcディレクトリを作成し、その中にindex.jsを作成します。
const name = "FuseBox"; console.log(name);
アプリケーションとは言えないですが、バンドル後、うまく実行できるとコンソールに「FuseBox」と表示されるはずです。
続けます。
ビルドしてみる
ビルドをしてみます。
node fuse.js
出力されたファイルを実行する。 出力されたファイルはdist/app.jsです。
node dist/app.js // FuseBoxと表示されれば成功です
まとめ
今回、FuseBoxを使ってみました。 Webpackとの比較は行いませんでしたが、たしかにビルドが早い気がします。 機会があったら自分のプロジェクトに導入してみたいと思います。 やはり、最新の技術を学ぶには英語が必要ですね。。。
以上です！
