Gruntへbabelを導入しes2015を試す : JavaScript

Tweet

Pocket

es2015を試すためbabelをGruntへ導入したメモです。

前提1 grunt-cliはインストール済みとしています。
前提1 フォルダ構成は下記のようにしています。

|--babel-example
    |
    |-- dev
        |
        |-- src
             |
             |-- app.js // es2015で書いたソース
        |
        |-- Gruntfile.js
        |
        |-- package.json
    |
    |-- js
        |
        |- app.js      // es5へ変換されたスクリプト


// package.jsonの初期状態
{
  "name": "babel-example",
  "version": "1.0.0"
}

gruntインストール

cd /path/to/dev
npm install --save-dev grunt

load-grunt-tasksインストール

npm install --save-dev load-grunt-tasks

grunt-bableインストール

npm install --save-dev grunt-babel

babel-preset-es2015インストール

npm install --save-dev babel-preset-es2015

Gruntfile.js

module.exports = function (grunt)
{
    require("load-grunt-tasks")(grunt);

    grunt.initConfig({
        "babel": {
            options: {
                sourceMap: true,
                presets: ['es2015']
            },
            dist: {
                files: {
                    "../js/app.js": "src/app.js"
                }
            }
        }
    });

    grunt.registerTask("default", ["babel"]);
};

実行

$ cd /path/to/dev
$ grunt