気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM、VOCALOIDについてのんびり書きます。

【JavaScript】Grunt + babelの環境メモ

最近はES2015(以下ES6)について学んでいる。

babelを利用し、ES6のコードをコンパイルを行い、ES5に変換して利用するとのこと。 (目的:ブラウザでまだ実装されていない、JavaScriptの新機能を使えるようにする)

コンパイルに必要なライブラリ

ライブラリ インストールコマンド 備考
babel-cli npm install -g babel-cli グローバルインストール
babel-preset-es2015 npm install --save-dev babel-preset-es2015
babel-polyfill npm install --save-dev babel-polyfill polyfillの意味:古いブラウザであってもモダンブラウザと同様の機能を提供する方法

スクランナー(Grunt)のライブラリ

ライブラリ インストールコマンド 備考
grunt-cli npm install -g grunt-cli グローバルインストール
grunt npm install --save-dev grunt
grunt-babel npm install --save-dev grunt-babel
grunt-contrib-watch npm install --save-dev grunt-contrib-watch ファイル変更の監視。grunt watch
load-grunt-tasks npm install --save-dev load-grunt-tasks

Gruntfile.jsの作成

// Gruntfile.js - 1ファイル
module.exports = function(grunt) {
    require('load-grunt-tasks')(grunt);
    grunt.initConfig({
        babel: {
            options: {
                sourceMap: true,
                presets: ['es2015']
            },
            dist: {
                files: {
                    'lib/basic.js': 'src/basic.es6.js'
                }
            }
        }
    });
    grunt.registerTask('default', ['babel']);
}
  • パターンを指定し、src配下のソースを対象とすることも可能
// Gruntfile.js - 複数ファイル
module.exports = function(grunt) {
    require('load-grunt-tasks')(grunt);
    grunt.initConfig({
        babel: {
            options: {
                sourceMap: true,
                presets: ['es2015']
            },
            dist: {
                files: [{
                    expand: true,
                    cwd: 'src',
                    src: ['**/*.js'],
                    dest: 'lib/',
                    ext: '.js'
                }]
            },
            watch: {
                js: {
                    files: ['src/**/*.js'],
                    tasks: ['babel']
                }
            }
        }
    });
    grunt.registerTask('default', ['babel']);
};


実行コマンド一覧

# 各ライブラリのインストール
$ npm install -g grunt-cli
$ npm install -g babel-cli
$ npm install --save-dev babel-preset-es2015
$ npm install --save-dev babel-polyfill
$ npm install --save-dev grunt
$ npm install --save-dev grunt-babel
$ npm install --save-dev grunt-contrib-watch
$ npm install --save-dev load-grunt-tasks

# Gruntfile.jsの記述
$ touch Gruntfile.js


# ファイル変更監視の開始
$ grunt watch

参考にした本や記事

  • 速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!

html5experts.jp

  • mae's blog

mae.chab.in