Ember CLI, Ember-Browserify, and Common JS dependencies

Ember CLI
1

Hello everyone,

I need some guidance on how to proceed with a build issue in my project. I’ve got a dependency not getting transpiled to ES5 when I build. The particular situation is I’m using the addon Ember-Browserify to import the npm package probe-image-size into a component which works as expected. The issue is one of the dependencies of that package, namely get-stream, is written as a CJS module with ES6 syntax which does not get transpiled to ES5 code in my vendor.js file.

So with that a few things:

  • I tried using the transform babelify with the presets babel-preset-es2015 to target the get-stream package specifically but without success. Not sure if it’s the right thing to do.
module.exports = function(environment) {
  var ENV = {
    ...
    browserify: {
      transform: ['babelify', {
        global: true,
        presets: ['es2015'],
        only: /\/node_modules\/get-stream/
      }]
    }
  }
}

Building produces a “ENOTEMPTY: Directory not empty, rmdir …” error on the projects tmp/ directory.

  • I thought that maybe I could manually use the broccoli-babel-transpiler in order to transpile the files needed myself and include them in the build tree. I’m having trouble understanding how to go about doing so though.

So far I’m just kinda struggling to get my head wrapped around the entire Broccoli pipline and how I might use it to solve this problem. The only solution I can think of for the time being is to manually use Browserify to transpile the entire probe-image-size package and its dependencies and just stick them in my vendor directory just so I can move forward.

Any insight is greatly appreciated.

Cheers!

2

Just wanted to give an update on this. Still haven’t discovered an elegant solution just yet but I did manage to get something working though it’s very very “bleh”. Installed browserify, babelify, and babel-preset-es2015 and manually used browserify on the probe-image-size package. Doing this allowed me to stick it in my vendor folder which then allowed me to import it as part of the ember build step.

$ browserify --standalone get-image-size -t babelify -t [babelify --presets es2015] node_modules/probe-image-size/index.js -o vendor/probe-image-size.js

Then inside ember-cli-build.js:

...
app.import('vendor/probe-image-size.js');

return app.toTree();

You’ll notice the --standalone option I used. It’s necessary here b/c without it you’ve no global hook to the package. With it you’ll have access to getImageSize on window (terrible I know). I learned about that option here for the curious.

I’d still love to learn of a better way then this and I’m willing to learn :slight_smile: Just needed a temp solution to keep moving forward.

3

Okay last update for the day. I was actually able to get the config for Ember-Browserify to work for me after all. It was a silly syntax error but I wanted to correct it here with what I did for posterity’s sake.

browserify: {
    transform: [
        ['babelify', {
            presets: ['es2015'],
            global: true,
            ignore: /\/node_modules\/(?!get-stream\/)/
        }], 
        ['babelify', {
            presets: ['es2015'],
            global: true,
            ignore: /\/node_modules\/(?!got\/)/
        }]
    ]
}

I needed to specify two transforms as there was two dependencies to handle it turns out. This was obtained from the babelify FAQ. It’s noted that this method of doing things should be done with care but I believe it’s far better than my previous solution.

Sorry if I wasted anyone’s time and thank you for looking.

3 Likes