49장 Babel과 Webpack

트랜스파일러인 Babel과 모듈 번들러인 Webpack을 이용해서 ES6+ / ES.NEXT 개발 환경을 구축해보자.

Babel

아래코드에서는 ES6의 화살표 함수와 ES7의 지수 연산자를 사용하고 있다.

[1, 2, 3].map(n => n ** n);

Babel을 사용해서 ES5 사양으로 변환할 수 있다.

"use strict";

[1, 2, 3].map(function (n) {
  return Math.pow(n, n);
});

이런식으로 Babel을 사용하여 구형 브라우저에서도 동작하는 ES5 사양의 코드로 변환(트랜스파일링) 할 수 있다.

Babel 설치

npm install --save-dev @babel/core @babel/cli

Babel 프리셋 설치와 babel.config.json

Babel 플러그인들을 모아둔것을 Babel 프리셋이라고 한다.
Babel을 사용하기 위해서 이 프리셋들을 설치하여 함께 사용해준다.
@babel/prese-env은 Babel이 제공하는 공식 프리셋 중 하나이다.

npm install --save-dev @babel/preset-env

기본 설정은 모든 ES6+ 사앙의 코드를 변환한다.

babel.config.json 설정 파일을 생성해주고, 다음과 같은 설정을 작성해준다.
이는 @babel/preset-env를 사용하겠다는 의미이다.

{
  "presets": ["@babel/preset-env"]
}

트랜스파일링

babel cli 명령어를 사용하거나, npm scripts에 등록하여 사용할 수 있다.

babel src/js -w -d dist/js

src/js 폴더에 있는 모든 자바스크립트 파일을 트랜스파일링한 후에 dist/js 폴더에 저장한다.

제안단계에 있는 사양

@babel/preset-env 는 현재 제안 단계에 있는 사양에 대한 플러그인을 지원하지 않는다.
필요하다면 별도의 플러그인을 설치해줘야한다.
Babel 홈페이지 에서 필요한 사양에 해당하는 플러그인은 검색해서 설치해주면 된다.

Webpack

Webpack은 의존 관계 있는 리소소들을 하나의 파일로 번들링 하는 모듈 번들러이다.
Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되어서 별도의 모듈 로더가 필요 없다.
Attachments/Picture/Pasted image 20240128164107.png|500

Webpack 설치

npm install --save-dev webpack webpack-cli

npm scripts에 webpack을 추가한다.

"scripts": {
	"build": "webpack -w"
}

babel-loader 설치

Webpack이 모듈 번들링할 때 Babel 사용해서 ES5사양의 코드로 트랜스파일링하도록 babel-loader 를 설치한다.

npm install --save-dev babel-loader

webpack.config.js

const path = require('path');

module.exports = {
  // entry file
  // https://webpack.js.org/configuration/entry-context/#entry
  entry: './src/js/main.js',
  // 번들링된 js 파일의 이름(filename)과 저장될 경로(path)를 지정
  // https://webpack.js.org/configuration/output/#outputpath
  // https://webpack.js.org/configuration/output/#outputfilename
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  // https://webpack.js.org/configuration/module
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src/js')
        ],
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  },
  devtool: 'source-map',
  // https://webpack.js.org/configuration/mode
  mode: 'development'
};

webpack 을 실행하면 번들링된 결과물이 생성된다.

<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="./dist/js/bundle.js"></script>
  </body>
</html>

babel-polyfill 설치

ES6에 추가된 Promise, Object.assign, Array.from 등은 ES5 사양으로 트랜스파일링해도 대체할 기능이 없다.
@babel/polyfill 을 통해서 이를 해결할 수 있다.

npm install @babel/polyfill

실제 운영환경에서도 사용해야하므로 --save-dev 옵션을 사용하지 않았다.

webpack.config.js 에서 entry 배열에 폴리필을 추가한다.

entry: ["@babel/polyfill", "./src/js/main.js"],