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

Babelの使い方③ - Babel + Webpack

More than 3 years have passed since last update.

Babelの使い方① - Babel単体
Babelの使い方② - Babel + Gulp

今回はBabelとモジュールシステムのWebpackを組み合わせた場合のビルド環境についてまとめます。
WebpackにおけるBabelのビルドは、webpackで利用されるloaderの内、babel-loaderを利用して、モジュールのビルド前(依存解決前)のタイミングでES6のコンパイルを行います。

Babel + WebpackのES6ビルド環境の構築

Babel built-systems -> Webpack

前提として、node.jsとbabelとwebpackがグローバルインストールされている状態を想定

webpackコマンドが見つからない的なメッセージが出た場合は、webpackをグローバルインストールして下さい
$ sudo npm install -g webpack

  • 適当なディレクトリを用意
$ mkdir babel_test/cap3
$ cd babel_test/cap3
  • package.jsonを作成 $ npm initで対話的に下記のようなファイルを作成しました↓
package.json
 {
        "name": "babel-test-webpack",
        "version": "1.0.0",
        "description": "hoge",
        "repository": "piyo",
        "main": "index.js",
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1"
        },
        "author": "",
        "license": "ISC"
}

ミスって、descriptionとかrepositoryが空になっちゃってもsudo vi package.jsonで編集出来ます。
(自分の環境だとread-onlyなpackage.jsonが生成されました)

  • 諸々のプラグインをインストール
 $ npm i --save-dev webpack babel-core babel-loader babel-preset-es2015

iはinstall、webpackはプロジェクトディレクトリにもインストールしないと動きませんでした。

  • .babelrcを作成
 $ touch .babelrc
 $ echo '{ "presets": ["es2015"] }' > .babelrc
  • webpack.config.jsを作成
webpack.config.js
 module.exports = {
        // ビルドの基点となるファイル
        entry: './src/entry.js',
        // ビルド後のファイル
        output: {
            path: __dirname + '/dist',
            filename: 'bundle.js'
        },
        // 拡張子が.jsのファイルはbabel-loaderを通してビルド(node_modulesは除外)
        module: {
            loaders: [{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }]
        }
};
  • コンパイル元のファイルを作成 class構文、デフォルトパラメータ、テンプレート文字列、文字列埋め込みを利用 モジュールの吐き出し/読み込みはwebpack(CommonJS)を利用
src/sampleClass.js
 class Sample {
        constructor(num = 1) {
            this.number = num;
        }
        getNumber() {
            console.log(`Number is ${this.number}`);
        }
        setNumber(num) {
            this.number = num;
        }
 }

 module.exports = Sample;
src/sampleClass.js
    var Sample = require('./sampleClass.js');

    var sample = new Sample;
    sample.getNumber(); // -> Number is 1
    sample.setNumber(5);
    sample.getNumber(); // -> Number is 5
  • ビルドする
 $ pwd # -> ~/babel_test/cap3
 $ webpack

スクリーンショット 2016-05-20 14.06.49.png

  • ウォッチも出来る
 $ webpack --watch

スクリーンショット 2016-05-20 14.11.29.png

  • 一応、コンパイル結果
dist/bundle.js
......

 /************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    'use strict';

    var Sample = __webpack_require__(1);

    var sample = new Sample();
    sample.getNumber();
    sample.setNumber(5);
    sample.getNumber();

 /***/ },
/* 1 */
/***/ function(module, exports) {

    "use strict";

 ......

    var Sample = function () {
        function Sample() {
            var num = arguments.length <= 0 || arguments[0] === undefined ? 1 : arguments[0];

            _classCallCheck(this, Sample);

            this.number = num;
        }

        _createClass(Sample, [{
            key: "getNumber",
            value: function getNumber() {
                console.log("Number is " + this.number);
            }
        }, {
            key: "setNumber",
            value: function setNumber(num) {
                this.number = num;
            }
        }]);

        return Sample;
    }();

    module.exports = Sample;

 /***/ }
/******/ ]);

bundle.jsのビルド(モジュールの依存解決)は出来ているけど、ES6がコンパイルされていない(bundle.jsにclassとか記述されたまま)の場合、プラグインが足りていない、もしくはwebpack.config.jsのmodule{}内において、babel-loaderの処理が通っていない可能性があります。
(自分は、タイポで詰まりました)

参考記事

Babel built-systems -> Webpack
webpack + babel-loaderでES6デビューしつつ、gulpもES6で書く
ECMAScript6で書こう!WebPackとES6-loaderで環境を作り、ES6を先取り体験する方法

satotaka
普段はRails x Reactを使っています。 alexaでスマートホーム化することにはまっています。
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