Jun 개발노트

BaBel setting

2020-04-03

Babel

  • 정의 : 특정버전의 자바스크립트 코드를 하위 버전의 자바스크립트 파일로 바꿔주는 트랜스파일러다.

  • 사용방법

    • npm install --save-dev babel-preset-env
    • .babelrc 생성 후 상황에 맞게 만듬
    //1. 기본 파일
    {
        "plugins": ["transform-react-jsx"], // 사용할 플러그인
        "ignore": [
            "foo.js",
            "bar/**/*.js"
        ]
    }
    
    //2. es2015 버전
    {
      "presets": ["es2015"] // 사용할 프리셋()
    }
    
    //3. 기본 브라우저
    // preset을 env로 주면 최신 버전(babel-preset-latest)로 설정되고 지원 브라우저의 버전을 정의할수 있다.
    {
      "presets": [
        ["env", {
          "targets": {
            "chrome": 52
          }
        }]
      ]
    }
    
    // 4. 최근 2가지 버전만 지원하면서 ie경우 10버전 이하는 제외 설정(강추)
    {
      "presets": [
        ["env", {
          "targets": {
            "browsers": ["last 2 versions", "not ie <= 10"]
          }
        }]
      ]
    }
    
  • 공식 문서

    npm install --save-dev @babel/core @babel/cli @babel/preset-env
    npm install --save @babel/polyfill
    
    {
    "presets": [
        [
        "@babel/env",
        {
            "targets": {
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1",
            },
            "useBuiltIns": "usage",
        }
        ]
    ]
    }