최신 사양을 사용하여 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요하다.

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

Babel

최신 사양의 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환해줌

설치

node.js 설치되어 있어야 함

# node.js 설치 확인
node --version

# 작업 폴더 생성 및 이동
mkdir project && cd project

# package.json 생성
npm init -y

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

설치가 완료된 후 package.json 파일에서 불필요한 내용은 삭제한다.

Babel을 사용하려면 @babel/preset-env을 설치해야 한다.
이는 함께 사용되어야 하는 Babel 플러그인을 모아 둔 것으로, Babel 프리셋이라고 부른다.

# env preset 설치
npm install --save-dev @babel/preset-env

설치가 완료된 후 프로젝트 루트에 .babelrc 파일을 생성하고 아래와 같이 작성한다.

cd project
vi .babelrc

// .babelrc 파일
{
  "presets": ["@babel/preset-env"]
}

👉🏻 @babel/preset-env를 사용하겠다는 의미

트랜스파일링

npm script를 사용하여 트랜스파일링하는 방법

package.json 파일에 scripts를 추가한다. 완성된 package.json 파일은 아래와 같다.

👉🏻 src/js 폴더에 있는 모든 ES6+ 파일들을 트랜스파일링한 후, 그 결과물을 dist/js 폴더에 저장한다.

트랜스파일링 실행

프로젝트 루트에서 아래 명령을 실행한다.

npm run build

확인

터미널에서 아래 명령어를 입력해 결과가 잘 나오는지 확인한다.

node dist/js/main.js

플러그인

설치

npm install --save-dev @babel/plugin-proposal-class-properties

설치한 플러그인을 .babelrc 파일에 추가해준다.

// .babelrc 파일
{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

문제점

브라우저의 ES6 모듈 기능의 사용 문제 발생
👉🏻 Webpack 이용하여 해결

Webpack

의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러(∵네트워크 비용 낭비)

설치

npm install --save-dev webpack webpack-cli

# babel-loader 설치
npm install --save-dev babel-loader

package.json 파일에 scripts를 아래와 같이 수정해준다.

프로젝트 루트에 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

실행 결과 dist/js 폴더에 bundle.js이 생성된다.

HTML 문서 연결

<body>
  <script src="./dist/js/bundle.js"></script>
</body>

문제점

Promise, Object.assign, Array.from 등과 같이 ES5 이하로 대체할 수 없는 기능은 트랜스파일링이 되지 않는다.

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

npm install @babel/polyfill

ES6의 import를 사용하는 경우 먼저 로드해줘야 한다.

// src/js/main.js
import "@babel/polyfill";
...

webpack을 사용하는 경우는 webpack.config.js 파일의 entry에 아래 내용을 추가해준다.

npm run build

sass 컴파일

➀ 컴파일한 결과물을 bundle.js 파일에 포함시키는 경우

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

설치 후 webpack.config.js 파일을 아래와 같이 수정한다.

npm run build

HTML 문서에 연결

<body>
  <script src="./dist/js/bundle.js"></script>
</body>

➁ 컴파일한 결과물을 별도의 css 파일로 분리하는 경우

npm install --save-dev mini-css-extract-plugin

설치 후 webpack.config.js 파일을 아래와 같이 수정한다.

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

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

npm run build

HTML 문서에 연결

<head>
  <link href="./dist/css/style.css" rel="stylesheet"></link>
</head>
<body>
  <script src="./dist/js/bundle.js"></script>
</body>

참고 자료
https://poiemaweb.com/es6-babel-webpack-1
https://poiemaweb.com/es6-babel-webpack-2

Author And Source

이 문제에 관하여(Babel & Webpack), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@deepbm/Babel

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Babel & Webpack