Skip to content

Babel

(Python의 i18n 라이브러리는 Python-babel 참조)

Babel은 아시다시피 ES6/ES7 코드를 ECMAScript5 코드로 transpiling 하기 위한 도구입니다. Babel은 다양한 작은 모듈들로 구성되어 있습니다. Babel 다양한 모듈을 담는 일종의 상자 역할을 하며 코드를 컴파일 하기 위해 작은 모듈들(ex. presets)을 사용합니다.

Categories

Installation

webpack 

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

Via config 

{
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

For more information see thebabel/babel-loaderrepo.

Create babel.config.json configuration file

Babel을 구성했지만 실제로 아무것도 하지 않았습니다. 프로젝트 루트에babel.config.json구성을 만들고 일부 사전 설정을 활성화합니다.

시작하려면 ES2015+에 대한 변환을 활성화하는 env 사전 설정을 사용할 수 있습니다. 

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

In order to enable the preset you have to define it in your babel.config.json file, like this: 

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

Simple example

babel 추가: 

yarn add --dev @babel/preset-env

.babelrc 편집: 

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

package.json에 바벨 빌드 명령 추가: 

{
  "name": "es6-project",
  "version": "1.0.0",
  "scripts": {
    "build": "babel src/js -w -d dist/js"
  },
  "devDependencies": {
    "@babel/cli": "^7.7.0",
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1"
  }
}

바벨 빌드 옵션 참고:

-w
타깃 폴더에 있는 모든 파일들의 변경을 감지하여 자동으로 트랜스파일한다. (--watch 옵션의 축약형)
-d
트랜스파일링된 결과물이 저장될 폴더를 지정한다. (--out-dir 옵션의 축약형)

Compatibility table

See also

Favorite site

Guide

References

  1. Create_the_latest_JavaScript_web_frontend_development_environment_with_Webpack_and_Babel.pdf ↩