커피스크립트에서 바벨로 옮기기

12-04.md

커피스크립트에서 바벨로 옮기기

이 글은 2015년의 루비 코리아 대림달력을 위해 작성되었습니다.

• 이전 글: 12월 3일: 심벌, 도대체 니 정체가 뭐야?
• 다음 글: 12월 5일: mac에 rbenv 사용해서 ruby 개발환경 세팅하기

루비 코리아의 대림 달력도 벌써 4일째입니다. 오늘은 루비 이야기는 아니긴 합니다만, 레일스와 관련있는 이야기를 해볼까 합니다.

동기

개인적으로는 레일스에서 커피스크립트를 사용하면서 크게 불만은 없습니다. 한 3년 썻으니 그냥 저냥 익숙하고 https://coffeescript-cookbook.github.io/같은 쓸만한 레퍼런스도 있고 커피스크립트 콘솔도 있고 동료들도 큰 불만 없이 사용하고 있습니다. 다만 coffee, rails같은 게 더 이상 채용에서 매력적인 단어가 아니라서, 한 일주일 이내에 바꿀 수 있다면 괜찮을 것 같다는 생각이 들더군요.

1. 유저 규모

유저 규모는 제가 언어를 고를때 가장 중요하게 보는 부분입니다. 쓰는 사람이 많은 언어는 레퍼런스를 찾기 쉬우며, 채용하기도 구직하기도 쉽고, 문제가 발생했을 때 고치기도 쉽습니다.

아직은 바벨이 스타나 포크가 커피 스크립트보다 더 적긴 합니다만, 2011년 이후 눈에 띌만한 발전을 하지않은 (그리고 발전이 있을 것 같지도 않은) 커피스크립트와 달리 최근에도 컨트리뷰트도 활발하게 이루어 지고 있고 언어 사양 자체도 V8, node.js에 지속적으로 추가되고 있으니 앞으로도 이런 경향은 계속될 것 같습니다.

2. 언어 자체

바벨은 서버 개발자들이 가장 실수 하기 쉬운 콜백에 관한 자체적인 해결책을 포함한 최신 기능을 적은 업데이트 비용으로 넣을 수 있습니다. 만약 지원하는 브라우저의 버전이 올라가 필요없는 변환이 생기면 변환 옵션을 꺼버리면 그만입니다.

레일스에 집어넣기

Gemfile에 다음 라인을 추가합니다.

# babel
gem 'sprockets', '>= 3.0.0'
gem 'sprockets-es6'

config/application.rb에는 이렇게만 해두면 됩니다.

require File.expand_path('../boot', __FILE__)
require 'sprockets/es6'

이제 es6 확장자로 파일을 작성할 수 있습니다. 이관할 때 복잡해지니 sprockets의 comment require는 그대로 사용하기로 했습니다.

lint

코드의 일관된 스타일을 위해 eslint를 사용하기로 했습니다.

제가 사용한 설정은 이렇습니다.

.eslintrc.json

{
    "parser": "babel-eslint",
    "rules": {
        "indent": [
            2,
            2
        ],
        "quotes": [
            2,
            "double"
        ],
        "linebreak-style": [
            2,
            "unix"
        ],
        "semi": [
            2,
            "never"
        ],
        "no-var" : 2,
        "no-undef" : 1,
        "prefer-arrow-callback": 2,
        "prefer-const": 1
    },
    "env": {
        "es6": true,
        "browser": true
    },
    "extends": "eslint:recommended"
}

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "rubocop": "git diff --name-only --diff-filter=ACMRTUXB --cached | grep '\\.rb' | xargs bundle exec rubocop",
    "eslint": "git diff --name-only --diff-filter=ACMRTUXB --cached | grep '\\.es6' | xargs eslint"
  },
  "pre-commit": [
    "rubocop",
    "eslint"
  ],
  "author": "marocchino",
  "devDependencies": {
    "babel-eslint": "^4.1.6",
    "eslint": "^1.10.1",
    "pre-commit": "^1.1.2"
  }
}

이렇게 하고 npm install해두면 커밋하기 전에 알아서 루비와 es6 파일을 채크해 줍니다.

결론

간단히 장점을 설명하고 도입하는 법을 적어보았습니다. 바벨에 관한 더 자세한 내용은 밑의 글들을 읽어보시면 좋을 것 같습니다.

• 바벨의 소개글(한글) http://nodejs.github.io/nodejs-ko/articles/2015/05/11/story-about-js-and-babel/
• 이관에 관한 글 https://discuss.bevry.me/t/move-from-coffeescript-to-es6/30
• 커피스크립트와 es6의 차이에 관한 설명 https://gist.github.com/danielgtaylor/0b60c2ed1f069f118562
• 반대 의견 http://tech.noredink.com/post/111583727108/dont-replace-coffeescript-with-es6-transpilers