FlyでES6/7時代のJavaScriptビルドシステムとやらを体験してみた
Flyとは
https://github.com/flyjs/fly
Node.js製のビルドシステムです。
gulp, Gruntなどと同じような事ができます。基本的なビルドシステムとしての機能を提供し、サードパーティのライブラリをもりもり入れていくことでできることの幅を増やしていく。というところも同じような感じです。
ただ大きくgulp, GruntとことなっていることとしてはFlyの場合、ES6のGeneratorを使って書いていくところです。
また、ES7で導入されるとされている『async/await』を使った記法も使えるようです。
早速適当な構成で試してみた
今回やってみたのは以下の様なこと
- src/にES6でコードを書いている
- src/に書いているコードをES5にコンパイルしてlib/に置く
- lib/に置かれたコードをbrowserifyでビルドしてbuild/に置きたい
- タスクが完了時に通知をしたい
- src/に置かれたファイルの変更を検知して自動的に↑の手順を実行させたい
まぁよくありそうなユースケースです。
必要なライブラリのインストール
npm install --save-dev fly
npm install --save-dev fly-notify
npm install --save-dev fly-browserify
npm install --save-dev fly-babel
タスクは『flyfile.js』という名前で書く
const paths = {
// ES6で書かれたソースコードはここに置かれる
src: ['src/**/*.js'],
// ES6で書かれたソースコードはここにES5で出力される
lib: ['lib/**/*.js'],
// テストコードがはここに書かれている
test: ['test/**/*.js'],
dist: {
lib: 'lib',
build: 'build',
}
}
/**
* デフォルト(タスクを指定しなかった場合に実行されるタスク)
* ES6で書かれたソースを監視して何か変更があった場合に自動的にビルドを行う
*/
export default function* () {
yield this.watch(paths.src, ['build'])
}
/**
* 本システムでのbuildと呼ばれる工程をすべて行う
*/
export function* build () {
yield this.start(['to5', 'browserify'])
}
/**
* ES6で書かれたコードをES5にコンパイルする
*/
export function* to5 () {
yield this.clear(paths.dist.lib)
yield this
.source(paths.src)
.babel({
stage: 0, sourceMaps: true
})
.notify({
title: 'Fly build',
message: "done to5"
})
.target(paths.dist.lib)
}
/**
* ES5のコードに対してBrowserifyでビルドする
*/
export function* browserify () {
yield this.clear(paths.dist.build)
yield this
.source(paths.lib)
.browse()
.concat('app.js')
.notify({
title: 'Fly build',
message: "done build"
})
.target(paths.dist.build)
}
実行してみる
# 適当にタスクを指定して実行
./node_modules/.bin/fly to5
# デフォルトのタスクを実行
./node_modules/.bin/fly
# 定義されているタスク一覧
./node_modules/.bin/fly --list
# タスク定義ファイルを指定して実行
./node_modules/.bin/fly --file filename.js
おまけ
参考のサンプル実装がみたい
Flyのリポジトリに色々のっているので参考になる
https://github.com/flyjs/fly/tree/master/examples
サードパーティのライブラリを探す
Author And Source
この問題について(FlyでES6/7時代のJavaScriptビルドシステムとやらを体験してみた), 我々は、より多くの情報をここで見つけました https://qiita.com/keitarou/items/ae4d647440dff3e8fb4b著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .