BaBel setting

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",
      }
      ]
  ]
  }