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

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

More than 1 year has passed since last update.

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

ryuone
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
ユーザーは見つかりませんでした