Browserify: control the order of transforms

[andrepadez]

use case:

var aliasify = require('aliasify');
var myTransform = require('my-custom-transform');
...
b.transform(aliasify);
b.transform(myTransform);

I expect that files being compiled go through aliasify before running through myTransform.
I tried switching the order of lines 4 and 5, and i get the same result, which is myTransform is being applied first.

Is there a way to control this? if not, would you consider implementing it?
Thanks

[jmcantrell]

It looks like this is supposed to ensure the order of the transforms. Do you have some code that demonstrates this?

[jmm]

Thanks for commenting @jmcantrell. @andrepadez What browserify version and OS? As @jmcantrell noted, they are supposed to be applied in the order added. Can you please create a repo that reproduces the problem?

[kentmw]

I am experiencing this issue, I believe, when using hbsfy and aliasify together. I want to reference a partial inside a handlebars template using an alias. Hbsfy will convert my partial references into require(...) invocations, which should let aliasify further convert them. However, when I put console.logs in both hbsfy and aliasify they were dumping out logs at the same time, suggesting hbsfy was not complete before aliasify started working. Perhaps the original poster is experiencing issues with timing between asynchronous transformations, which would explain why there is no difference between switching the order.

This is my configuration:

  var browserify = require('browserify');
  var b = browserify();
  b.add('./app/init');
  b.transform('hbsfy', { traverse: true });
  b.transform('aliasify');

{
  "aliasify": {
    "aliases": {
      "app": "./app"
    }
  }
}

and I'm referencing this alias in my templates:

  {{> app/myPartial.hbs }}

I'm getting this error:

Error: Cannot find module 'app/myPartial.hbs' from '/other/dev' 

and the logs were interlaced:

aliasify - /other/dev/myView.js: replacing app/myFile.js with ./../myFile of function require
hbsfy - var partial$0 = require('app/myPartial.hbs');
aliasify - /other/dev/mySecondView.js: replacing app/mySecondFile.js with ./../mySecondFile of function require

Here is the issue on hbsfy: https://github.com/epeli/node-hbsfy/issues/56
I'm using browserify version 13.0.0

[kentmw]

Perhaps there is some asynchronous aspect to some of these transforms? Perhaps the hbsfy function will end before it has completed updating the files? It doesn't look like browserify handles promise resolution for transforms, and it's expected that everything is completed when the transform returns.

[jmm]

Hi @kentmw, transforms are stream based so inherently async, but of course they run in sequence on a given file. Maybe it has something to do with this: options.jsFilesOnly. Anyway, I'm closing this issue because no one has provided a repro. I suspect your problem has to do with how those two transforms interact rather than something fundamental about how Browserify transforms work. Stackoverflow is one place you can try for help. If you're able to isolate a bug in Browserify's transform handling, please open a new issue with a minimal repro. If you need help getting started see miniminirepro/browserify. Thanks!

[jmm]

@kentmw Take a look at the appliesTo option -- maybe it'll help you. Not sure how that interacts with the other option of the underlying lib, jsFilesOnly. If it doesn't work out, you could try my pathmodify plugin.

[kentmw]

I modified jsFilesOnly in my downloaded node_modules/aliasify/aliasify.js, and it worked. At least, it worked in my case. I'll try out the appliedTo option, and move this conversation over to the aliasify project. Thank you so much for your help!

EDIT: it works to use appliesTo and is most likely the preferred method.

  "aliasify": {
    "aliases": {
      "app": "./app",
    },
    "appliesTo": {"includeExtensions": [".js", ".hbs"]}
  }