ruby-on-railsrubyasset-pipelinebrowserify-rails

How do I get browserify-rails to transpile es6 files?


I have just created a new project with browserify-rails and Rails 4.2. My package.json looks like this:

{
  "name": "neat-verify",
  "dependencies": {
    "browserify": "~> 10.2.4",
    "browserify-incremental": "^3.0.1",
    "es6ify": "^1.6.0",
    "nuclear-js": "^1.1.1",
    "react": "^0.13.3",
    "reactify": "^1.1.1"
  },
  "browserify": {
    "transform": [
      [
        "reactify",
        "es6ify"
      ]
    ]
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.10"
  }
}

Everything installs just fine, but when I try to load my very simple es6 file with this:

module.exports = n =>  n * 11;

The file contents are exactly as above, which isn't what I expected as this is not valid ES5.

How do I get it to actually transpile this?


Solution

  • So, after trying a lot I gave up using browserify-rails to perform the transpilation and decided to use react-rails, much simpler and all I needed to transpile JSX and ES6 was include this config:

    config.react.jsx_transform_options = {
      whitelist: [
        "es6.arrowFunctions",
        "es6.classes",
        "react",
      ]
    }
    

    Now a file called foo.js.jsx with:

    var log = msg => console.log(msg);
    
    class Hello extends React.Component {
    
        render() {
            return <div>Hello, {this.props.name}!</div>
        }
    }
    

    Gets correctly transpiled and included at application.js.