Transforms: es6

[jeffutter]

I am probably missing something obvious here, but I can't seem to get browserify-rails to recognize es6 files:

I have added es6ify to my package.json
and
config.browserify_rails.commandline_options = "-t es6ify --extension=\".js.es6\"" to my application.rb

But it seems to not bother applying the transform to either required .js.es6 files or ones directly hit by my browser. It just ends up with a parsing error because it doesn't know what 'let' is.

Any suggestions?

[cymen]

@jeffutter Did you figure out anything on this? I fixed the issue with newer versions of browserify so you could try browserify 6.2.0 and 0.5.0 of this gem and see if the issue is resolved upstream. I am curious as I would like to start using more transformations.

[jeffutter]

@cymen I don't believe it is working (although I may be setting some things up incorrectly.

I have the following files:

package.json

{
  "name": "something",
  "devDependencies" : {
    "browserify": "~> 6.2"
  },
  "license": "MIT",
  "engines": {
    "node": ">= 0.11"
  },
  "dependencies": {
    "phantomjs": "1.9.8",
    "es6ify": "1.5.1"
  }
}

in application.rb

config.browserify_rails.commandline_options = "-t es6ify --extension=\".js.es6\""

test.js.es6

var log = msg => console.log(msg);

module.exports = log;

test2.js

var foo = require('./test');

When I hit test2.js with a browser the body contains something like this:

},{"./test":2}],2:[function(require,module,exports){
var log = msg => console.log(msg);

module.exports = log;
},{}]},{},[1])

Which is the non-transformed es6 (which my browser can't understand). Am I missing something?

[jeffutter]

Actually, after doing more checking. If i add the following to my package.json:

"browserify": { 
    "transforms": [ "es6ify" ]
  },

And I hit a .js.es6 file from my browser (with the .es6 extension) it will transpile it. However, if I require one from a .js file it does not. This seems to work with or without the line in application.rb

[cymen]

@jeffutter So I asked about this over at es6ify (thlorenz/es6ify#60) and that prompted me to look again at the browserify README. It says this:

Transforms may obtain options from the command-line with subarg syntax:

$ browserify -t [ foo --bar=555 ] main.js

So how about trying:

config.browserify_rails.commandline_options = "-t [ es6ify --extension=\".js.es6\" ]"

I'll try it too

[cymen]

On a side note, I've gotten proxyquireify working locally. I think we can add to the README sections on modules like proxiquirify and es6ify that other people might find useful too. The configuration is a bit tricky at the moment (even if we ignore browserify-rails) for some of these things.

[xnomadbb]

I've been searching for a solution to this, and that didn't work for me. =(

As far as I can tell es6ify doesn't have any way to take the normal subarg-style CLI options. You'll see that there's nothing in its index.js exports that takes an options argument (you can see this in action if you look at eg. reactify). So unless you're invoking es6ify via JS, I don't see any way to get at this. (I'm very new to node/browserify, however, I could possibly be overlooking something.)

My use case is very different, I'm trying to get es6ify to handle JSX files as part of a React project, but what did work for me was this awful hack:

// Filename: my-es6ify.js
module.exports = require('es6ify').configure(/\.jsx?$/); // My regexp here

Then wherever browserify is being invoked, use your duck-punched transform:
browserify in.js -o out.js -t ./my-es6ify

I suppose it would be pretty quick to add proper support for subargs as well (it's just another argument passed to whatever you export), but this was "good enough" for a quick hack. Good luck.

[cymen]

@xnomadbb @jeffutter I made a PR to es6ify to add support for subarg: thlorenz/es6ify#65

I did notice I need to use the full filename to require the files. For example, if my file is named b.js.es6, I need a require('./b.js.es6') -- require('./b') won't work. I don't know if transforms can somehow inform browserify about extensions they support or if this is just the way it is.

[xnomadbb]

@cymen You'll also need to add --extension=.js.es6 or similar to your browserify arguments (not just the es6ify subargs) for that. One tells es6ify to transpile those files, the other tells browserify to look for that extension when something is required.

From browserify docs:

  --extension=EXTENSION

    Consider files with specified EXTENSION as modules, this option can used
    multiple times.

[cymen]

@xnomadbb Nice! Thanks for the tip.

I forked es6ify to here: https://www.npmjs.com/package/es6ify-with-subarg

Hopefully, that fork will go away soon but if not, at least we can use it now.

[jeffutter]

I have moved my workflow to using gulp/browserify so I can't test if this has been fixed. Someone else may close the PR once it has been fixed.

[gordoncl]

I am also having trouble with running the 6to5 compiler with this gem. I think it might be due to this line:
https://github.com/browserify-rails/browserify-rails/blob/master/lib/browserify-rails/browserify_processor.rb#L57

ES6 uses import to link dependencies.

Edit: After downgrading to version 0.5.0, I can say that my code compiles properly.

[cymen]

@Munksey So the fix for that would be to have that line ( https://github.com/browserify-rails/browserify-rails/blob/master/lib/browserify-rails/browserify_processor.rb#L57 ) check for import too? If so, I am happy to add it but can you show me a basic usage so I can add a test case too?

[Darep]

Had a similar problem, browserify-rails was not picking up files written in ES6. I cheated and simply added this line to my ES6 syntaxed files:

// for browserify-rails: module.exports

And it works. Hehee. What if there was a setting for forcing should_browserify? to return true for non-CommonJS files? :)

PS. Thanks @cymen for the great gem!

[cymen]

@Darep That would be a good option to have. We could add more checks for ES6 (I don't know off hand if that is practical). It might be nice to have a magic string we can use like you did above with module.exports and/or the option to just try to browserify all JavaScript (like you suggest).

I have to think about it and am curious what other people think.

[Darep]

I'm glad to hear you're considering it! The magic string trick was fun at first, but it started to get annoying copy & pasting it to every file. Instead, I'm now running a modified version of the gem where should_browserify? always returns true, hehe. All my files are in ES6 anyways, so no harm for me :)

[cymen]

Detection of ES6 is mentioned on this issue too for anyone interested: #85

[sb8244]

Seems that this complex of a workflow will end up going to full Node-based pipeline, but figured I would chime in that I still cannot get this working.

    config.browserify_rails.force = true
    config.browserify_rails.commandline_options = '-t [ reactify --extension es6 ] -t [ es6ify ] --extension=.js.es6'

These options work well for individual files, but files that are required still come out not as es6. Here is what one of the requires comes out to:

var React = require("react");

class PersonImage extends React.Component {
  render() {
    return (
      React.createElement("div", {className: "full-width-img-wrapper"}, 
        React.createElement("img", {src: this.props.src, className: "img-responsive img-circle"})
      )
    );
  }
}

exports.default = PersonImage;

[cymen]

If anyone has time and wants to dig into this further, PRs are very welcomed.

[chrissun-gs]

Some previous comments said ES6 detection is important.
Would it be a hack if the function "should_browserify?" included a test if the file extension was .es6 ?
For example:

def should_browserify?
  force_browserify? || (in_path? && !browserified? && (commonjs_module? || es6_file?))
end

def es6_file?
  self.file.include?('.es6')
end

[rosskevin]

I'm not sure if this is helpful but in researching a move to es6 I found this blog post which appears to have had success using browserify-rails with babelify:

https://lorefnon.me/2015/11/15/a-minimal-setup-for-using-es6-modules-in-rails.html

[h0jeZvgoxFepBQ2C]

@rosskevin Your suggested link works fine, but f.e. I have now the problem, that when I use react via npm/packages.json, I can require it, but I still get the es6 react/redux version directly to the browser... Really complicated setup to use react/redux with rails and es6... Quite frustrating..

[cymen]

@lichtamberg Would it be possible for you to push up a minimal rails project with that configuration? Because of the wide variation in potential ways to set things up, it's hard to understand a problem without looking at an example. I'm happy to take a closer look to see if there is something that can be done on the browserify-rails side to make this situation better. Or is that the approach outlined w/o using browserify-rails? If so, understand but can't help so much of course.

[rosskevin]

Fyi - I created and am now using gulp-pipeline, gulp-pipeline-rails for non-rails and rails projects alike.

https://github.com/alienfast/gulp-pipeline-rails

[h0jeZvgoxFepBQ2C]

Thanks for your help, I somehow managed to make it work now... I posted my solution here: http://www.lampesberger.net/blog/2016/03/16/react-slash-redux-with-rails-3-dot-2-and-sprockets/