rails로 ES2015(Babel)인 환경을 빨리 만든다

Rails 어플리케이션에 있어서의 프런트엔드 개발에 대해서, 아래와 같은 일을 하려고 하면(자) browserify/webpack등으로 빌드해~라고 하는 기사를 자주(잘) 보겠습니다.

ES2015에서 쓰고 싶습니다

프런트 엔드 라이브러리 관리에 npm을 사용하고 싶습니다.

하지만, brawserify라든지 webpack라든지 조금 문턱이 높다고 느끼는 사람도 많지 않을까요?
이번에는 그런 사람이라도 빨리 도입할 수 있는 sprockets-commoner라는 gem을 소개합니다.

Shopify/sprockets-commoner

실행 환경

Ruby v2.3.3

Rails v5.0.1

npm v3.10.3

Ruby는 v2계, npm은 v3계 이상이 필수입니다.
이번에는 Rails5에서 확인하고 있지만 Rails4에서도 문제없이 작동해야합니다.

Rails로 프로젝트 만들기

먼저 프로젝트를 만듭니다.

$ rails new rails-es2015-sample -B -T -C

Gem을 추가하여 bundle install

Gemfile에 다음을 추가하여 bundle install

gem 'sprockets-commoner'

babel 주변 설정

package.json 만들기

다음 명령을 실행하여 package.json을 만듭니다.

$ npm -y init

그런 다음 babel-core, babel-preset-es2015를 설치합니다.

$ npm install --save-dev babel-core@6 babel-preset-es2015

설치 완료 후

package.json

{
  "name": "rails-es2015-sample",
  "version": "1.0.0",
  "description": "This README would normally document whatever steps are necessary to get the application up and running.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-preset-es2015": "^6.18.0"
  }
}

.babelrc 파일 만들기

아래 내용으로 .babelrc 파일을 만듭니다.

{
  "presets": ["es2015"]
}

기본 설정은 이상입니다.

시도하다

그럼 시험에 npm에서 Vuejs를 설치하여 이용해 보겠습니다.

$ npm install --save vue

적당하게 화면을 만듭니다

$ rails g controller home index

erb 파일을 다음과 같이 다시 씁니다.

app/views/home/index.erb

<div id="app">
  <p>{{msg}}<button @click="say">click</button></p>
</div>

다음 파일을 추가합니다.

app/assets/javascripts/main.js

import Vue from 'vue/dist/vue';

new Vue({
  data: {
    msg: 'Hello'
  },
  methods: {
    say () {
      alert('Hello');
    }
  }
}).$mount('#app');

이제 서버를 시작하고 화면을 확인해 보겠습니다.

$ rails s

움직이고 있습니다!

요약

sprockets-commoner를 사용하여 쉽게 ES2015를 활용할 수있었습니다.
우선 rails에서 ES2015 사용하고 싶다면 추천합니다.