92
78

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-12-11

最近、babel-preset-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とかインストール必要もないですし。
今後は、これを使っていこう。

92
78
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
92
78