manmanrai’s diary

勉強記録ブログ

Babelインストールからコンパイル実行するまで

ES2015の基準に合わせたJavaScriptを書きたいと思いまして、
Babelというコンパイラを導入してみたいと思います。

公式サイト

babeljs.io

環境

mac 10.13.2

手順

  • npmでインストールしますので、まずnode.jsの生存を確認する
$ npm --version
> 3.10.10

バージョンが出たら、存在しているということですね。
Babelの公式サイトによると、npm2.Xではなく、npm3.Xでインストールするのがおすすめらしいです。

Note: Running a Babel 6.x project using npm 2.x can cause performance problems because of the way npm 2.x installs dependencies. This problem can be eliminated by either switching to npm 3.x or running npm 2.x with the dedupe flag.

  • 該当のフォルダに移動し、フォルダ初期化する
$ npm init

ここでプロジェクト名やバージョンなど案件の詳細を聞かれます。終わったら、「package.json」が生成され、先ほど聞かれたものjson形式で記載されてます。
もしこのインストールは練習用であれば、ずっとenter(return)を押し続けても大丈夫です。デフォルトか空白になります。

もしくは、素早く初期化して、デフォルトpackage.jsonも生成できるコマンド叩きます。

$ npm init -y
  • フォルダ内でBabelをインストールする
$ npm install babel-preset-env --save-dev

無事にインストールできたら、「node_modules」というフォルダが生成されます。

ここ注目して頂きたいのは「babel-preset-env」です。
babel-preset-envはES2015基準でコンパイラには必要なパッケージ全部入ってる便利なライブラリーだそうです。

  • .babelrcに関して

.babelrcという(隠し)ファイル(記述はjson形式)はコンパイルする時に参照する設定を入れる場所です。
コマンドで.babelを作成します。

$ touch .babelrc

そして、env使うので、関連な記述を入れます。

{
  "presets": ["env"]
}

ウェブサイトに応用することにあたって、対応するブラウザのバージョンに関して詳しく指定できるみたです。
例えば最新の2つバージョンとsafari7以上に対応するとか。

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

公式サイトに対応できる範囲を詳しく書いています。

Env preset · Babel

「babel-cli」というライブラリーをインストールします。
このライブラリー入れることでコマンドでコンパイル実行できるようになります。

$ npm install babel-cli --save-dev

※package.jsonの中身を確認してみると、

{
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1"
  }
}

envとcliに関する記述があれば大丈夫だと思います。

  • テストしてみよう

テスト用のindex.jsを作って、コマンドでコンパイル実行します。

$ ./node_modules/.bin/babel index.js

これ実行したら、ターミナルにコンパイルされたものが表示されたら、Babel無事にインストールできたということです!

ネットで色んな記事は大体この辺で終わりますが、いっぱい検索した方も気づいたかもしれません。凄く短いコマンドで使ってらっしゃる方もいますね。
しかし、今までの手順でやってきたので、何故かbabelコマンドで叩いてもNot foundで返って来ます。

$ bable index.js
> -bash: babel: command not found

違いはどこにあるのか、何回も読み返して判明しました。
グローバルインストールした場合には短いコマンド使えそうです。
つまり、最初のインストールは-g入れてます。

$ npm install --global babel-cli

公式にはローカルインストールの方がおすすめしてるみたいで、理由は下記になります。

While you can install Babel CLI globally on your machine, it’s much better to install it locally project by project. There are two primary reasons for this. 1. Different projects on the same machine can depend on different versions of Babel allowing you to update one at a time. 2. It means you do not have an implicit dependency on the environment you are working in. Making your project far more portable and easier to setup.

CLI · Babel

上記の2つの理由特に気にしなければ、グローバルインストールでも問題ないと思います。

今回はグローバルではないので、何とか短いコマンド使いたいですね。
公式サイトにおすすめされたnpxというパッケージを使えば、コマンドは劇的に短縮できるようで、npxについて調べてみました。

qiita.com

なるほど、npmを5.2.0以降のバージョンにアップグレードしたら使用可能みたいですね。
最初にBabelインストールする時に確認した時に

$ npm --version
> 3.10.10

node.jsのバージョンリリース早見表はこちら

リリース一覧 | Node.js

  • npmをアップグレードする

今回はこの記事を参照させて頂きました。

qiita.com

$ npm update -g npm

無事にアップグレードし、npxも入ってるようで、

$ npx babel index.js

このコマンドでコンパイル実行されました!!前より短く使えやすくなりました。

  • 別ファイルとして書き出す

同じ階層ならこんな感じで書きます。

$ npx babel index.js --out-file index2.js

--out-file → -o 置き換え!

別フォルダも大丈夫です。

$ npx babel ./src/index.js --out-file ./lib/index.js

もしくはフォルダごとコンパイルしたいなら。

$ npx babel src --out-dir lib
> src/index.js -> lib/index.js

--out-dir → -d 置き換え!

監視して欲しいなら。

$ npx babel src --out-dir lib --watch
> src/index.js -> lib/index.js

--watch → -w 置き換え

  • 【補足】コマンドではなくて、scriptでのコンパイルやり方

コマンドをpackage.jsonのscriptに入れる方法もあります。
この記事を参照させて頂きました!

qiita.com

この記事通りやってみて、分かったことが2つあります!

  1. .babelrcいらない
  2. package.json内のコマンドはbabelで書く(npxがなくても大丈夫)

こちらも良さそうですね。

自分にとって、今回のインストールとても勉強になりました。
いつも通りやりながら書きましたが、今回わからないことが多くて、結構時間かかりました。
これからもこうやって知識どんどん増やしていきたいと思います。