Rails asset pipeline with ES6 modules and browserify

Question

I'm trying to implement something with the rails asset pipeline that is proving harder than I'd hoped.

In order to structure the app cleanly, I plan to use a module system for the javascript. For this I want to use CommonJS modules, but I'd like to write them using the new ES6 syntax for future compatibility.

I've found the ES6 module transpiler extension for the asset pipeline, which works well, but this only converts it into the CommonJS format. I still need to get this into JS that the browser understands. For that I'm looking at using Browserify but my problem lies in combining these 2.

The module transpiler works in a per file basis, but browserify works by checking all of the files needed. The problem is that browserify can't use the original files as they're no in CommonJS format, they're in ES6, so it needs the transpiled versions, but because that happens in the pipeline, I can't point browserify at a file.

Are there any ways around this?

Answer 1

My recommendation is to use the browserify-rails gem. For ES6, you would use a transform such as this one: https://github.com/thlorenz/es6ify

Update some months later: I still recommend the same path but if you can get off of the asset pipeline, I highly recommend going to webpack or browserify directly. The asset pipeline has some benefits but in my experience, trying to make JavaScript a first-class citizen is painful with it and the benefits outweigh the drawbacks (for me).

Answer 2

You might want to try Seth Vincent's approach, where he uses package.json, and npm scripts to run all JavaScript tasks, and only uses bundle.js in the asset pipeline. You could then shell out to npm tasks from your Rakefile. I like his approach because it opens up the modern JS tool chain for JS tasks.