wamw Friday I/O 4日目です。
株式会社ワムウでは、毎週金曜日は 興味がある事柄に取り組み、その成果を何らかの形でアウトプットする日 としています。
Fusebox とは
gulp/grunt + browserify や webpack + *loader のような所謂モジュールバンドラーです。
Fuseboxの特徴として
- とても強い
- クッソ速い
- めっちゃシンプル
- 柔軟性抜群
をうたっています(公式で)。
何ができるの？
プラグインの兼ね合いなどもありますが、その他モジュールバンドラーでできることは同じようにできます。
加えて、後発であるがゆえに近年のWebフロントエンド開発に必要な機能が スマートに実装されていて、簡単に使える という印象があります。
同じようなことをするにも gulp や webpack だと
- 設定ファイルが複雑で学習しづらい
- やりたいことに適したプラグインを探すところからはじまり、追加で学習コストがかかる
-
webpack-dev-server/client?http://localhostってなによ -
hogerifyしすぎ。hogeloader使いすぎ。
さあ使ってみよう
まずはもちろん。
yarn でも npm でもお好きなもので fuse-box をインストールします。
追加で使用するものも必要に応じて入れてください。
npm install fuse-box --save-dev
npm install typescript --save-dev
ちょっとしたコードを書きます。
export class MyClass {
constructor(public name: string = 'My name is Taro!') {}
}
import { MyClass } from './myclass'
const me = new MyClass()
console.log(me)
そして Fusebox 用の設定ファイルを記述します。
const { FuseBox } = require('fuse-box')
const fuse = FuseBox.init({
homeDir: 'src',
output: 'dist/$name.js',
})
fuse.bundle('app')
.instructions('>index.ts')
fuse.run()
これで準備ができました。
あとはこの fuse.js を動かすだけです。
❯ node fuse
--------------------------
Bundle "app"
index.js
myclass.js
└── (2 files, 617 Bytes) default
size: 617 Bytes in 27ms
簡単ですね！
ちょっとまて
ぱっとみでもなんとなくわかるものの、1行よくわからない点がありますね。
そうです。
.instructions('>index.ts');
こいつです。
動きを上から順に解説していくと、まずFuseboxの初期化
const fuse = FuseBox.init({});
この FuseBox.init() の返り値である fuse のことを FuseBox は Producer と呼んでいます。
この Producer を作成する際に渡したパラメータやプラグインがこの Producer を通して作られるバンドルの基本設定となります。
出典: http://fuse-box.org/page/bundle#bundle
詳しい設定はこちら。
http://fuse-box.org/page/configuration
作成したProducerに対して .bundle('app') を行うと「app っていうバンドルを作ってね。そしてそれは……」という意味になります。
そしてお待ちかねの .instructions('>index.ts')
.instrunctions というメソッドを呼ぶと、基本的には「このファイルをバンドルしてね」となるのですが、FuseBoxはここに色々な算術記号を用いて少し複雑なことができます。
ファイル読み込み時に自動で実行 したり バンドル指定時にファイルを追加 したり 特定のファイルを除外 したり vendorファイルだけをバンドル化 したり globで指定 したりです。
ここで言う .instructions('>index.ts') の > は「ファイル名の前につけるとバンドル化したファイルを読み込み時に自動で実行」という意味の記号で、全体としてはFuseBox算術命令語で「index.tsをファイルを読み込んだ際に自動で実行する形でバンドル化してね」となります。
> の他にも色々な記号や書式があるので、詳しいことは下記公式ドキュメントを確認してください。
終わりに
本当に簡単な設定だけの説明となったので、詳しく知りたい方は公式ドキュメントやサンプルを見てみてください。
いつもやっている通り
- サーバ建ててwatch
- SCSSビルドしてコンポーネントに埋め込み
- HMRで幸せ
- タスクランナー走らせてあれやこれや
なんてことも、もちろんできます。
次回はもう少し踏み込んだところを解説しようと思います。