How to set up a Rails application with ES6 support

I created this sample application to test ES6 support with a resource pipeline.

This setup uses browserify-rails gem, and I followed its README instructions.

I can’t understand why it works in development, but doesn’t work when executing the precompile command:

$ env RAILS_ENV=production rake assets:precompile
rake aborted!
ExecJS::ProgramError: Unexpected token: name (Hello) (line: 11569, col: 6, pos: 326685)

Error
    at new JS_Parse_Error (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:11936)
    at js_error (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:12155)
    at croak (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:20622)
    at token_error (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:20759)
    at unexpected (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:20847)
    at semicolon (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:21320)
    at simple_statement (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:24179)
    at /private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:22152
    at /private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:21493
    at block_ (/private/var/folders/xt/853lxmvx7yx2w8v4xyc92t4h0000gn/T/execjs20160203-64141-15mqs7ljs:2659:26198)
  (in /Users/rodrigora/Projects/browserify_test/app/assets/javascripts/application.js)new JS_Parse_Error ((execjs):2659:11936)
js_error ((execjs):2659:12155)
croak ((execjs):2659:20622)
token_error ((execjs):2659:20759)
unexpected ((execjs):2659:20847)
semicolon ((execjs):2659:21320)
simple_statement ((execjs):2659:24179)
(execjs):2659:22152
(execjs):2659:21493
block_ ((execjs):2659:26198)
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:39:in `exec'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:21:in `eval'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:46:in `call'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/uglifier-2.7.2/lib/uglifier.rb:212:in `run_uglifyjs'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/uglifier-2.7.2/lib/uglifier.rb:179:in `compile'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/uglifier_compressor.rb:25:in `evaluate'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/context.rb:197:in `block in evaluate'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/context.rb:194:in `each'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/context.rb:194:in `evaluate'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/bundled_asset.rb:25:in `initialize'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/base.rb:377:in `new'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/base.rb:377:in `build_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/index.rb:94:in `block in build_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/caching.rb:58:in `cache_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/index.rb:93:in `build_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/base.rb:287:in `find_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/index.rb:61:in `find_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/manifest.rb:211:in `block in find_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/manifest.rb:257:in `benchmark'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/manifest.rb:210:in `find_asset'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/manifest.rb:119:in `block in compile'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/manifest.rb:118:in `each'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/sprockets/manifest.rb:118:in `compile'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-rails-2.3.3/lib/sprockets/rails/task.rb:70:in `block (3 levels) in define'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-2.12.4/lib/rake/sprocketstask.rb:146:in `with_logger'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/gems/sprockets-rails-2.3.3/lib/sprockets/rails/task.rb:69:in `block (2 levels) in define'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/bin/ruby_executable_hooks:15:in `eval'
/Users/rodrigora/.rvm/gems/ruby-2.2.4@browserfy/bin/ruby_executable_hooks:15:in `<main>'
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)

Gemfile:

source 'https://rubygems.org'

gem 'rails', '4.1.14'
gem 'sass-rails', '~> 4.0.3'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0',          group: :doc
gem 'spring',        group: :development
gem "browserify-rails"

Application / assets / JavaScripts / home.js

var Hello = require('./components/hello.jsx');
new Hello();
console.log('hi');

Application / assets / JavaScripts / components / hello.jsx

"use strict";

class Hello {
  constructor() {
    $(window).ready(function() {
      $('body').append('Hello es6!');
    });
  }
}

module.exports = Hello;

package.json

{
  "name": "something",
  "dependencies" : {
    "browserify": "~> 10.2.4",
    "browserify-incremental": "^3.0.1",
    "babelify": "^7.2.0"
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.10"
  }
}
+4
source share
1 answer

, , babel, babelify. , : https://babeljs.io/docs/plugins/

, babelify README, , :

$ browserify -t [ babelify --presets [ es2015 react ] ]

, , , , , es2015, , :

$ npm install --save-dev babel-preset-es2015

config/application.rb :

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

, , .

, , , tmp/*

.

+4

Source: https://habr.com/ru/post/1627153/


All Articles