Help us understand the problem. What is going on with this article?

babel-preset-es2015をbabel-preset-es2015-node6に変えてビルドを早くする

More than 3 years have passed since last update.

Node.js 4.x系で作ってたWEBアプリケーションがあり、サーバーサイドでもbabelにbabel-preset-es2015を噛ませて通してた。
これを 6系 にアップグレードしようと思ったんだけど、そういえば6系にしたらimport/export以外はほとんどES2015サポートしてるはずと気づいた。
そうなってくるとbabelで無駄なトランスパイルがいっぱい走って時間の無駄なのでどうにかできないかなとおもってぐぐったらピッタリなライブラリがあった。
https://github.com/jhen0409/babel-preset-es2015-node6

普通に考えてこっちのほうが無駄が少ないので変更してみる。

babel-preset-es2015 -> babel-preset-es2015-node6

まずはnodeのアップデート。2016/11/22現在のレコメンドバージョンということでv6.9.1を使うことにした。

console
$ nvm install v6.9.1
$ nvm alias default 6.9.1

次にpresetsをes2015-node6に置き換え。

console
$ npm install --save-dev babel-preset-es2015-node6

es2015-node6を入れて

.babelrc
   "presets": [
-    "es2015"
+    "es2015-node6"
   ]

babelの設定を書き換える。
以上。アプリケーションもうまく動いたので互換性は保てそう。

ビルド時間計測

早くなるのは当たり前で、どれくらいはやくなったか試してみる。

babel-preset-es2015

console
$ npm run build:server
[12:01:16] Starting 'build:server'...
[12:01:19] Finished 'build:server' after 2.9 s

babel-preset-es2015-node6

console
$ npm run build:server
[12:03:36] Starting 'build:server'...
[12:03:38] Finished 'build:server' after 1.94 s

1秒短縮!トランスパイルしたあとのファイルも軽くなってオトク。

「サーバーサイドでわざわざbabel通すな」とか「まだimport使うな」のような天の声が聞こえてきそうですが、もし同じようなことをしている人は試してみるとストレス軽減できるかも。

otakky
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away