Browserified NPM dependencies are not transpiled

[sohara]

I initially opened this issue against ember-cli and was informed that this addon is the best place to address this currently. For reference: https://github.com/ember-cli/ember-cli/issues/6170

We are using Ember CLI along with Ember Browserify to manage a number of our client-side dependencies. In one of our new packages the author elected to write some modules using ES2015 features/syntax. The package is also used server-side in a Node 4.x environment and this works without issue.

I have a repro project here: https://github.com/sohara/halp-markdown

Basically I added a dependency that exposes a function that uses const which should be transpiled if using the ES2015 Babel preset. The const remains in the source if you inspect the build vendor.js file. Works fine in current Chrome. Here's source of the npm packages's entry file:

'use strict';

function parse(str) {
  const newString = '<p>' + str + '</p>';
  return newString;
}

module.exports = {
  parse: parse
};

This older issue: https://github.com/ef4/ember-browserify/issues/60 was closed but I don't think it was ever really addressed.

The comment from @nathanhammond in the linked Ember CLI issue is informative and may provide insight as to how this issue might be addressed.

Output from ember version --verbose:

ember-cli: 2.7.0
http_parser: 2.5.2
node: 4.4.3
v8: 4.5.103.35
uv: 1.8.0
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 46
openssl: 1.0.2g
os: darwin x64

[Polve]

I have the same problem.

Do you know of any workaround?

[ef4]

Browserify supports "transforms", and you can use them with this addon (see the README.md).

There is a browserify transform that uses babel, but I haven't tried it. See https://github.com/babel/babelify

[Polve]

After a lot of time, I've still issues with this task, a pointer to some example would be very welcome, thanks for any help.

[Skwai]

The use-case I'm having trouble with is when using ES6 NPM modules. They aren't being transpiled:

eg: https://github.com/jsdom/whatwg-url

// app.js
import "npm:whatwg-url";
import Ember from "ember";

...

The vendor.js file will have const and class declarations from the whatwg-url plugin in it. It isn't being transpiled for me to ES5 for support for phantomJS

[ef4]

Yeah, browserify is probably not the right tool for that use case. It really should be built into ember-cli.

But in this particular case, somebody has already packaged the URL polyfill for ember-cli: https://github.com/tchak/ember-url