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

babelでトランスコンパイルしてminifyする方法

More than 1 year has passed since last update.

はじめに

自分のNodeプロジェクトでbabelを入れてみる事にしました。minifyはgulpでやっていたのですが、babelで出来る事が分かったので切り替えました。その過程でいくつか躓いたのでメモを残しておきます。

環境

Debian 9.3
node v8.9.4
npm 5.6.0

ちなみにwindowsでも確認してあります。

前準備

まずプロジェクトとテストに使うjsファイルを作成します。

$ mkdir babel-test
$ cd babel-test
$ mkdir js
$ echo '[1, 2, 3].map((n) => n + 1);' > ./js/example.js

これで次のようなファイルが出来ました。プログラムは公式の例を参考にしています。

./js/example.js
[1, 2, 3].map((n) => n + 1);

次に必要なモジュールを入れていきます。

$ npm init -y
$ npm install babel-cli babel-preset-env babel-minify babel-preset-minify rimraf -D

なお、既存のプロジェクトに追加した時は、Cannot find module core-js/library/fn/object/keyのようなエラーが出て動きませんでした。この時はnode_modulesを全て消して、モジュールを新しくインストールし直したら解決しました。

babel-cliを試す

トランスコンパイルするコマンドがbabel-cliです。次のように実行出来ます。

$ ./node_modules/.bin/babel ./js/ -d ./jsts
js/example.js -> jsts/example.js

成功したっぽいのでファイルを確認しましょう。

./jsts/example.js
[1, 2, 3].map(n => n + 1);

、、、変わってません。
公式にも書いてありますが、ちゃんとトランスコンパイルするようには、.babelrcbabel-preset-envを使うように設定する必要があります。

$ touch .babelrc

次のように編集します。

.babelrc
{
  "presets": ["env"],
}

これで試してみます。

$ ./node_modules/.bin/babel ./js/ -d ./jsts
js/example.js -> jsts/example.js

次のようにアロー関数が普通の関数になっています。

./jsts/example.js
"use strict";

[1, 2, 3].map(function (n) {
  return n + 1;
})

Production環境でminifyする

さて、次にminifyですが、出来たらproduction環境だけでminifyしたいですよね。(デバッグが面倒すぎるので)
.babelrcを次のように設定します。

.babelrc
{
  "presets": ["env"],
  "env": {
    "production": {
      "presets": ["minify"]
    }
  }
}

"env"はpresetsのenvと混合しそうですが別物で、環境変数によって設定を変える時に使います。環境変数の設定方法は公式ドキュメントに書いてあります。今回はexportでBABEL_ENVの設定を変えます。なお、Windowsの場合はSET BABEL_ENV=productionです。

$ export BABEL_ENV=production
$ ./node_modules/.bin/babel ./js/ -d ./jsts
Error: Cannot read property 'contexts' of null

何故かエラーになりました。試しに次のようにコマンドを直接実行してみます。

$ ./node_modules/.bin/minify ./js/ -d ./jsts
Error: Cannot read property 'contexts' of null

これ以外にもError: Couldn't find intersectionなどのエラーが出る事もありました。色々とググって解決法を見つけたので、試してみました。

.babelrc
{
  "presets": [
    "env"
  ],
  "ignore": [],
  "env": {
    "production": {
      "presets": [
        [
          "minify",
          {
            "builtIns": false,
            "evaluate": false,
            "mangle": false
          }
        ]
      ]
    }
  }
}
$ ./node_modules/.bin/babel ./js/ -d ./jsts
js/example.js -> jsts/example.js
.jsts/example.js
"use strict";[1,2,3].map(function(a){return a+1});

出来た \(^^)/

presetsについて

さて、.babelrcの"env"は環境変数によって処理を切り替える、、、と書きましたが、これは少し間違いです。例えば次の例を見て下さい。

.babelrc
{
  "presets": ["env"],
  "env": {
    "production": {
      "presets": ["minify"]
    }
  }
}

上記の設定でbabelコマンドを実行すると、production環境ではbabel-preset-envの処理を行った後に、babel-preset-minifyが処理されます。つまりパイプされています。上記の書き方だとpresetsが上書きされているわけではない事に注意して下さい。試しに一行目の"presets": ["env"]を削除して実行すると、次のようにminifyだけされたファイルが出力されます。

コンパイルを簡単にする

上記のコマンドを毎回入れるのは面倒ですので、npm run buildでコンパイル出来るようにしましょう。 "script"の所に次の一行を追加します。

.package.json
  "scripts": {
    "build": "./node_modules/.bin/rimraf ./jstc && ./node_modules/.bin/babel ./js/ -d ./jsts",
  },

rimrafはフォルダを消すコマンドです。一旦クリーンアップしてから新たに作るようにしています。
なお、Windowsの場合は".\\node_modules\\.bin\\babel"のようなパスの書き方でないと動きませんでした。

さてコマンドを実行しましょう。

$ npm run build

> babel-test@1.0.0 build ~/babel-test
> babel ./js/ -d ./jsts

js/example.js -> jsts/example.js

出来た v(^^)v

まとめ

今回はひとまずminifyまで試したかったのでここまでですが。まだ色々とやる事はありそうなので、順次更新しようと思います。

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした