Using ES6 with browserify-rails

This is my memo on Using ES6 with browserify-rails.

Install browserify-rails

gem "browserify-rails"

Install the following npm dependencies

$ npm install --save babel-preset-es2015
$ npm install --save babelify
$ npm install --save browserify
$ npm install --save browserify-incremental

Add to Heroku buildpacks that run bundle and npm install

$ heroku buildpacks:add https://github.com/heroku/heroku-buildpack-nodejs.git
$ heroku buildpacks:add https://github.com/heroku/heroku-buildpack-ruby.git

Add the following line to the config/application.rb file

config.browserify_rails.commandline_options = "-t [ babelify --presets [ es2015 ] --extensions .es6 ]"

Hello test in ES6

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

require("./main");

app/assets/javascripts/main.js

const hello = require('./hello');

hello();

app/assets/javascripts/hello.js

module.exports =  function(){
  alert('hello world');
}

Deploy the project to Heroku

Claer the asset pipeline cache.

$ rake tmp:cache:clear

Precompile assets before pushing it to Heroku.

$ bundle exec rake assets:precompile

Reference