如何配置支持ES6的Rails應用程序

Question

我已經創建了這個示例應用程序來測試資產管道的ES6支持。

此設置使用browserify-rails gem，我遵循其README指令。

我無法理解為什么它在開發中工作但在運行預編譯命令時失敗：

$ 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"

應用程序/資產/ JavaScript的/ home.js

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

應用程序/資產/ Java腳本/組件/ 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"
  }
}

Answer 1

這可能與最近的babel和babelify的變化有關。 現在大多數轉換被推送到預設，您可以在以下網址查看： https ： //babeljs.io/docs/plugins/

現在，如果您查看babelify的README，您可以看到格式應該如何傳遞給browserify：

$ 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/*文件

我能夠在你的例子中得到它並運行。