Babel
자바스크립트는 아주 파편화가 끝내주는 언어 중 하나이다.
플랫폼 별로 사용법도 다르고 짧은 시간내에 급격하게 여러가지 기능이 추가된 언어이다.
그러나 파이썬처럼 하위호환성을 포기하고 만든 언어가 아닌지라 옛날 방식으로 코딩역시 가능하다.
그러다보니 인터넷에 범람하는 코드들을 보면 정말 온갖 패러다임으로 코딩되어있고 문법 역시 온갖 버전의 문법들이 사용되고 있는것을 볼 수 있다.
문제는 이게 브라우저 별로, 플랫폼별로, 서버별로 사용하는 사용되는 자바 스크립트 버전이 다르다는 것이다.
자바스크립트의 최신 문법들은 정말 좋은 문법들이 많다. 그러나 그게 해당 브라우저에서 반드시 지원한다는 법 역시 없다는게 문제.
위에서 설명했듯이 브라우저 뿐만아니라 OS별로도 안쓰는 경우도 존재하고 nodejs(서버)에서 안쓰는 경우도 존재한다는 문제점이 있다.
그럼 그걸 전부 신경써서 코딩을 할까? 가령 내가 출시할 브라우저에서 A라는 문법을 지원을 안한다면 A라는 문법을 안쓰고 프로그래밍을 할 것인가?
크롬에서는 A를 지원하고 파이어폭스에서는 A를 지원안하면 크롬용 파이어폭스용 따로 만들 것인가?
안드로이드는? 삼성 인터넷은? 그렇게 할거면 브라우저, 플랫폼별로 10개는 동시에 만들어야 할 것이다.
그래서 사람들이 생각한게 최신문법으로 사용해서 코딩하되 배포시에 구버전으로 트랜스컴파일해서 출시하는 것이다.
자바스크립트가 구버전이라면 왠만해서는 지원해 주지 않을까? 최신버전이 안되는 경우가 있지만 하위호환을 포기하지 않았다면 구버전이 안되는 일은 없다.
Babel은 내가 현재 버전을 지정해주면 ES5로 바꿔준다.
바벨은 내가 현재 내 코드의 버전을 지정해주면 ES5로 바꿔준다.
여기서 다른 버전은 아마 선택할 수 없는것 같다. 어떻게 셋팅을 하려해도 모르겠다.
아는 분은 제보바람.
Babel 사용법
npm init
먼저 프로젝트를 만들어 준다.
만약 프로젝트가 이미 있다면 당연한 이야기이지만 위를 할 필요는 없다.
npm install --save-dev @babel/core @babel/cli
그 다음 babel 코어와 babel cli를 설치해준다.
core의 경우 당연히 babel의 기본 기능이며 cli는 인터페이스이다.
그냥 크게 생각할 거 없이 둘다 설치해준다.
"build": "babel src -d out"
그 다음 script를 추가해준다.
이제 npm run build를 실행해주면 out이라는 폴더에 빌드 결과물이 나오게 될것이다.
그리고 여러분이 번역할 폴더는 반드시 src아래에 둬야한다.
babel <번역할 파일> -d <번역된 파일>
당연하지만 번역할 파일이나 번역될 파일을 다르게 하려면 위의 파일들의 이름을 바꿔주면된다.
그래서 src폴더를 만들어준다.
이제 src에 테스트 파일을 하나 만들어보자.
// Person.js
class Person {
constructor(){
this.name = 'kukaro';
}
getName() {
return this.name;
}
}
console.log(10 ** 2);
export default Person;
위의 파일들을 보면 ES6이후의 문법으로 만들어진걸 볼 수 있다.
npm run build
그럼 빌드를 한번 해보도록 하자.
결과를 보면 알겠지만 아무일도 일어나지 않았다.
그 이유는 현재 스크립트의 버전을 정해주지 않았기 때문이다.
그래서 babel을 사용할 때는 반드시 현재 버전을 언급해 줘야한다.
.babelrc
.babelrc는 바벨의 설정파일이다.
기본적으로 만들어주지는 않는데 여러분이 만들어야한다.
위치는 package.json이 있는 위치에 만들어 줘야한다.
{
"presets": ["@babel/preset-env"]
}
presets는 현재의 babel이 번역할 버전을 의미한다.
preset-env는 현재 가장 적절한 버전을 알아서 골라준다.
보통은 ecma script중 stable버전을 고른다.
즉 우리의 코드가 ecma script stable버전이라고 가정하고 번역하는 것이다.
대신에 그냥 하면 안되고 preset-env를 설치해줘야한다.
npm install --save-dev @babel/preset-env
이렇게 설치해주면 번역할 준비는 끝난다.
npm run build
이제 다시 빌드해보자.
이제는 빌드 결과를 확인해 보자.
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
// Person.js
var Person =
/*#__PURE__*/
function () {
function Person() {
_classCallCheck(this, Person);
this.name = 'kukaro';
}
_createClass(Person, [{
key: "getName",
value: function getName() {
return this.name;
}
}]);
return Person;
}();
console.log(Math.pow(10, 2));
var _default = Person;
exports["default"] = _default;
이제 제대로 빌드된 걸 확인할 수 있다.
바벨은 이 외에도 컴파일을 하기위한 여러가지 기능들이 있다.
모든 기능들을 알 필요는 없지만 여러분의 스타일에 맞는 몇가지 문법은 추가적으로 알 필요는 있다.