ES lessons 13-14. Babel, Webpack

2023.04.09

자바스크립트 스터디 12회차

공부 사이트: https://poiemaweb.com/

 

13.  Babel

1) 정의

Babel은 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환시킬 수 있는 트랜스파일러(Transpiler)이다.

 

 

2) 설치

npm을 이용한 Babel CLI 설치 과정 (로컬 설치 권장)

 

// 1. 디렉터리 생성
mkdir ...

// 2. package.json 생성
npm init -y

// 3. babel-core, babel-cli 설치
npm install --save-dev @babel/core @babel/cli

// 4. Babel 프리셋 설치
npm install --save-dev @babel/preset-env

// 5. 프로젝트 루트에 .babelrc 설정파일 생성 후 아래와 같이 작성
{
  "presets": ["@babel/preset-env"]
}

// 6. Babel 플러그인 설치 (TC39 프로세스의 stage 3단계에 대한 플러그인)
npm install --save-dev @babel/plugin-proposal-class-properties

 

ㅇ Babel 프리셋

Babel을 사용하기 위해 함께 사용되어야 하는 Babel 플러그인 모음인 @babel/preset-env 를 설치해야 한다. 

 

 

3) 트랜스파일링

ES6+ 코드를 ES5 이하의 코드로 트랜스파일링하기 위해 명령어를 사용할 수도 있으나, npm script를 통해서도 트랜스파일링 할 수 있다.

 

// package.json 파일에 script 추가
"scripts": {
    "build": "babel src/js -w -d dist/js"
  }

ㅇ -w 옵션: 타깃 폴더에 있는 모든 파일들의 변경을 감지하여 자동으로 트랜스파일링

ㅇ -d 옵션: 트랜스파일링된 결과물이 저장된 폴더 지정

 

// 해당 명령을 통해 트랜프파일링 실행
npm run build

 

 

 

14. Webpack

1) 정의

의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러이다.

→ 별도의 모듈 로더가 불필요함

→ html 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야 하는 번거로움도 사라짐

 

 

2) 설치

// 1. Webpack 설치
npm install --save-dev webpack webpack-cli

// 2. Webpack이 모듈을 번들링할 때 Babel을 사용하여 트랜스파일링하도록 babel-loader 설치
npm install --save-dev babel-loader

// 3. script 변경 → Babel 대신 Webpack을 실행하도록
  "scripts": {
    "build": "webpack -w"
  }

 

그리고 Webpack 실행 시 참조하는 설정 파일인 webpack.config.js 파일을 생성한다. (프로젝트 루트)

// 4. webpack.config.js 생성

const path = require('path');

module.exports = {
  // enntry file
  entry: './src/js/main.js',
  // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
  output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: 'bundle.js'
  },
  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/concepts/mode/#mode-development
  mode: 'development'
};

 

아래 명령어를 통해 트랜스파일링 및 번들링을 실행.

- 트랜스파일링은 Babel이, 번들링은 Webpack이

npm run build

 

 

 

3) @babel-polyfill

프로미스, Object.assign, Array.from 등... ES5 이하로 대체할 수 없는 기능은 트랜스파일링이 불가능하다.

오래된 브라우저에서 ES6+에서 새롭게 추가된 객체나 메소드를 사용하기 위해 설치해야 한다.

npm install @babel/polyfill

 

이를 사용하기 위해서는 코드 내에서 polyfill을 로드해야 한다.

import "@babel/polyfill";

 

그러나 Webpack을 사용하는 경우, import 대신 webpack.config.js 파일의 entry 배열에 polyfill을 추가해준다.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: ['@babel/polyfill', './src/js/main.js'],
  ......

 

 

3) SasS 컴파일

Webpack을 이용해서 Sass(Syntactically Awesome StyleSheets)를 컴파일하는 방법에 대해서 알아볼 것이다.

＃ SasS: CSS 확장

 

① 패키지 설치

npm install node-sass style-loader css-loader sass-loader --save-dev

 

② webpack.config.js 파일 수정

const path = require('path');

module.exports = {
  // entry files
  entry: ['@babel/polyfill', './src/js/main.js', './src/sass/main.scss'],
  // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정
  output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: 'bundle.js'
  },
  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']
          }
        }
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader", 
          "css-loader",   
          "sass-loader"  
        ],
        exclude: /node_modules/
      }
    ]
  },
  devtool: 'source-map',
  // https://webpack.js.org/concepts/mode/#mode-development
  mode: 'development'
};