babel-preset-envを簡単にさわってみた。

  • 25
    いいね
  • 0
    コメント

最近、babel-prepare-envなる物を知ったので、どんな物なのかを調べてみました。
知ったきっかけは、

です。あと、

babel-preset-env is 1.0!とアナウンスが流れてきたので、使ってみたいなーと思ったしだいです。


Babelとは

ES2015,ES2016などの新しいJavaScriptの規格(文法や機能)に対応していないブラウザでも使えるように、昔の文法に変換してくれるライブラリです。


babel-preset-envとは

babel/babel-preset-envをみていただくのが一番いいのですが、

Babel preset that automatically determines the the Babel plugins you need based on your supported environments. Uses compat-table

と書かれています。
要するに、compat-table(ECMAScript 6 compatibility table)を用いて、サポートされている環境に基づいて必要なBabelプラグインを自動で決定するライブラリということらしいです。


インストール

$ npm install --save-dev babel-preset-env

使い方:準備

babel-cliのインストール

babelのコマンドを使いたいので、babel-cliをインストールします。

$ npm install --save-dev babel-cli

.babelrcの作成

とりあえず、babel/babel-preset-envの設定を記述。

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

使い方:変換1

変換(トランスパイル)対象のファイル(index.js)を作成する。

とりあえず簡単なプログラムを作成する。

class A{
  constructor(name){
    this.name;
  }
  say() {
    console.log(this.name)
  }
}

変換("browsers": ["last 2 versions", "safari >= 7"])

./node_modules/.bin/babel index.js

変換後のプログラム

"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var A = function () {
  function A(name) {
    _classCallCheck(this, A);

    this.name;
  }

  _createClass(A, [{
    key: "say",
    value: function say() {
      console.log(this.name);
    }
  }]);

  return A;
}();

使い方:変換2

.babelrcをNodeように書き換える。

babelrcJavaScript

{
  "presets": [
    [ "env", {
      "targets": {
        "node": "current"
      }
    } ]
  ]
}

変換("node": "current")

./node_modules/.bin/babel index.js

変換後のプログラム

"use strict";

class A {
  constructor(name) {
    this.name;
  }
  say() {
    console.log(this.name);
  }
}

まとめ

いい感じに、変換してくれて楽ですね。babel-preset-es2015とかインストール必要もないですし。
今後は、これを使っていこう。

この投稿は SRA Advent Calendar 201612日目の記事です。