[javascript] Babel이 다른 도구와 함께 어떻게 사용되나요?

29 Nov 2023

javascript

Webpack과 함께 사용하기

Webpack은 모듈 번들러로서 Babel과 함께 사용하면 효과적인 프론트엔드 개발 환경을 구축할 수 있습니다. Webpack의 설정 파일에서 Babel을 로더로 추가하면 자동으로 Babel이 동작하게 됩니다. Babel은 ES6+ 코드를 ES5로 변환하여 웹 브라우저에서 실행 가능하도록 만들어줍니다. 아래는 Webpack 설정 파일에서 Babel을 함께 사용하는 예시입니다.

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: './dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

Gulp와 함께 사용하기

Gulp는 태스크 자동화 도구로서 Babel과 함께 사용하면 손쉽게 프로젝트를 빌드하고 테스트할 수 있습니다. Gulp의 태스크에서 Babel을 사용하려면 gulp-babel 패키지를 설치한 후에 아래와 같이 Gulp 태스크를 작성하면 됩니다.

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('scripts', () =>
    gulp.src('src/**/*.js')
        .pipe(babel({
            presets: ['@babel/preset-env']
        }))
        .pipe(gulp.dest('dist'))
);

ESLint와 함께 사용하기

ESLint는 자바스크립트 코드를 분석하여 코드 스타일과 잠재적인 오류를 찾아주는 도구입니다. Babel을 ESLint와 함께 사용하면 ES6+ 문법을 사용하는 코드도 정확하게 분석할 수 있습니다. 아래는 .eslintrc 파일에서 Babel을 함께 사용하는 예시입니다.

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true
  },
  "extends": "eslint:recommended",
  "plugins": [],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

Babel은 이외에도 다양한 도구들과 함께 사용될 수 있으며, 필요한 도구에 따라 설정을 조정하여 원하는 개발 환경을 만들 수 있습니다. Babel 공식 문서와 각 도구의 문서를 참고하면 더 자세한 사용법을 알 수 있습니다.

참고 자료

Babel 공식 문서: https://babeljs.io/
Webpack 공식 문서: https://webpack.js.org/
Gulp 공식 문서: https://gulpjs.com/
ESLint 공식 문서: https://eslint.org/