.babelrc에 대해...

.babelrc에 대해...

Vue CLI명령을 통해 프로젝트를 생성했다면 다음과 같은 파일을 만날 수 있다. 

younghuui-MacBook-Pro:Vue younghumin$ vue init webpack hello-world

? Project name hello-world

? Project description A Vue.js project

? Author younghu min <yhmin@mibank.me>

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Set up unit tests Yes

? Pick a test runner jest

? Setup e2e tests with Nightwatch? Yes

? Should we run `npm install` for you after the project has been created? (recommended) yarn

   vue-cli · Generated "hello-world".

# Installing project dependencies ...

# ========================

yarn install v1.16.0

info No lockfile found.

[1/5] 🔍  Validating package.json...

[2/5] 🔍  Resolving packages...

warning autoprefixer > browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

warning css-loader > cssnano > autoprefixer > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

warning css-loader > cssnano > postcss-merge-rules > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

warning css-loader > cssnano > postcss-merge-rules > caniuse-api > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

warning eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.

warning extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin

warning jest > jest-cli > jest-environment-jsdom > jsdom > left-pad@1.3.0: use String.prototype.padStart()

warning nightwatch > mocha-nightwatch > json3@3.3.2: Please use the native JSON object instead of JSON 3

warning nightwatch > proxy-agent > socks-proxy-agent > socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0

warning webpack-bundle-analyzer > bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!

[3/5] 🚚  Fetching packages...

[4/5] 🔗  Linking dependencies...

[5/5] 🔨  Building fresh packages...

success Saved lockfile.

warning Your current version of Yarn is out of date. The latest version is "1.19.1", while you're on "1.16.0".

info To upgrade, run the following command:

$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash

✨  Done in 19.11s.

Running eslint --fix to comply with chosen preset rules...

# ========================

yarn run v1.16.0

$ eslint --ext .js,.vue src test/unit test/e2e/specs --fix

✨  Done in 1.40s.

# Project initialization finished!

# ========================

To get started:

  cd hello-world

  npm run dev

  

Documentation can be found at https://vuejs-templates.github.io/webpack

숨김파일 처리되어 보이지 않으니 맥에서는 cmand + Shift + . 을 눌러 숨김파일을 보이게 한 뒤 .babelrc 파일을 열어보면 다음과 같은 내용이 있다. 

{

  "presets": [

    ["env", {

      "modules": false,

      "targets": {

        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

      }

    }],

    "stage-2"

  ],

  "plugins": ["transform-vue-jsx", "transform-runtime"],

  "env": {

    "test": {

      "presets": ["env", "stage-2"],

      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]

    }

  }

}

이 파일은 많은 모던 웹 브라우저들이 JavaScript ECMAScript 2015(이하 ES6) 문법을 어느정도 지원해 주긴 하지만 아직 지원이 부족한 상황이라 크로스 브라우징(Cross-browsing)을 위해 코드를 ES5로 변환해줘야 한다. 이때 주로 바벨(babel) 이라는 도구를 사용해 ES6문법을 ES5문접으로 트랜스파일링(Transpiling)하게 되는데 .babelrc에는 바벨에 대한 세팅이 정의되어 있다. 

속성중에서 presets 속성에는 바벨이 어떤 문법까지 트랜스파일링을 해줄 수 있느냐가 정의되어 있다. Vue CLI는 기본적으로 env와 stage-2 프리셋을 셋탱해주는데 이 중 env는 바벨(babel)의 가장 기본적인 프리셋이다. env 프리셋은 기본적인 설정 외에도 추가적으로 다른 옵션들을 사용할 수 있다. 

modules는 ES6의 module문법을 다른 문법으로 변경해주도록 지정하는 역할을 하지만 Vue CLI에서는 webpack을 사용하여 모듈링(moduling)을 진행하기 때문에 굳이 문법을 변경할 필요가 없기때문에 false로 정의되어있다. 

targets는 이 프로젝트가 어느 브라우저까지 지원할 것인지를 정의해 놓은 속성이다. Stage-2라는 것은 Javascript의 표준 명세를 정의하는 단계 중 하나인데, Stage-0부터 Stage-4까지 있으며 숫자가 작을수록 미승인에 가깝다고 볼 수 있다. 이 중 Stage-4는 우리가 지금 사용하는 자바스크립트의 표준을 의미한다. 즉, 바벨은 아직 논의가 끝나지 않아 표준이 되지는 않았지만 편리한 기능들을 사용할 수 있도록 도와 주는 것이다. 

자바스크립트의 표준은 ECMA 인터내셔널이라는 단체의 TC39라는 위원회에서 정해지게 된다. TC39위원회의 프로세스는 0단계에서 4단계까지 총 5단계로 되어 있으며, 각 단계에서 다음 단계로 승급하기 위해서는 만족시켜야 할 명시적인 조건들이 존재한다. 

1. stage-0 허수아비(strawman): 0단계는 아직 제안이 TC39회의의 안건으로만 상정되어 있는 상태이며, 라이센스 관련 조항에 동의하고 TC39의 컨트리뷰터로 등록되어 있는 사람이라면 누구던지 제안할 수 있다. 

2.stage-1 제안(Proposal) : 0단계에서 1단계가 되려면 우선 이 기능의 개발을 책임지고 이끌어나갈 챔피언(Champion)이 있어야 한다. 어떤 제안이 1단계에 오면 본격적으로 위원회 수준에서 시간을 들여 이 제안에 대해 논의할 정도가 되었다는 것을 의미한다. 

3. stage-2 초안(Draft) : 1단계에서 2단계가 되려면 ECMAScript표준의 형식 언어로 작성된 형식 서술의 초안이 필요하다. 2단계부터는 상대적으로 1단계보다 기능에 대한 적은 변경이 요구된다. 

4.stage-3 후보(Candidate) : 3단계까지 온 제안은 거의 완성 단계를 의미한다. 이 단계에 오르기 위해서는 문법, 작동법, API에 대한 모든 부분이 완벽하게 기술된 문서가 있어야 한다. 이 단계에서는 구현상 심각한 문제가 발견되지 않는 이상 변경이 더 이상 허락되지 않는다. 

5. stage-4 완료(Finished) : 4단계는 기능이 완성되어 제안이 수락되었고, 다음 표준에 포함되어 발표되기만을 기다리는 상태다. ECMAScript의 표준은 매년 6월 발표되는데 당해 3월 회의에서 최종 승인된 제안들이 새로운 표준에 포함되어 발표된다. 

<출처 : 커피한잔 마시며 끝내는 Vue.js> 중에서