mmyoji's diary

プログラミングとか日々のどうでもいいこととか

GulpやGruntを使わずワンライナーでES6をコンパイル

大げさに言ってみましたが...

いちいちgulpとか使うのはめんどくさいですよね。package.jsonだけで全部面倒みてくれー、って思いつつ普段gulpfileを書いたりしてたんですが、 vuejs/vueify-example · GitHub を見てたらワンライナーでちゃちゃっと書いていたのでメモを残しておきますmm

Let's Try!

$ npm init -y

# この2つだけでおk
$ npm i --save-dev watchify babelify

"scripts" の部分に付け足しただけです。 dev って書いてますがなんでもいいです。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "watchify -v -t babelify -e js/src/main.js -o js/build/bundle.js"
  },
  "author": "mmyoji",
  "license": "ISC",
  "dependencies": {
    "todomvc-app-css": "^2.0.1",
    "todomvc-common": "^1.0.2",
    "vue": "^0.12.7"
  },
  "devDependencies": {
    "babelify": "^6.1.2",
    "watchify": "^3.3.1"
  }
}

これで package.json があるディレクトリに js/src/main.jsjs/build/ を置いて、コマンドラインnpm run dev ってやれば、main.jsの変更を監視してくれるのでES6書き放題です。ちなみにBabelがjstもサポートしたとのことなので、ReactもES6でササッとかけちゃいますね。