Babel 사용법③ - Babel + Webpack

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

시계도 가능

 $ webpack --watch

일단 컴파일 결과

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에 클래스 또는 설명 된대로) 플러그인이 부족하거나 webpack.config. js의 module {} 내에서 babel-loader가 처리되지 않았을 수 있습니다.
(자신은 타이포로 막혔습니다)

참고 기사

Babel built-systems -> Webpack
webpack + babel-loader로 ES6 데뷔하면서 gulp도 ES6로 작성
ECMAScript6로 쓰자! WebPack과 ES6-loader로 환경을 만들고 ES6을 선점 체험하는 방법