Babel & Webpack

19956 단어 webpackbabelbabel

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

트랜스파일러 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

Image Filtering 실습
[js] node.js 환경에서 디버깅하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage