Browserify: allow to specify global-transforms

Created on 24 Dec 2013  路  5Comments  路  Source: browserify/browserify

For the sake of argument lets say I'm working on a project A which depends on point-generator.

point-generator depends on xtend.

So now I'm trying to apply a transform to the index.js file in xtend.
To do that I'll add my transform to the package.json of my package A.

No transforms are specified in xtend or its dependent package.jsons and my higher level transform doesn't get called when node_modules/point-generator/node_modules/xtend/index.js is resolved.

As a result I have no chance to transform xtend/index.js since my transform is never called.

This is where global transforms could help. They would be called for EVERY file that is resolved, even the ones from child dependencies.

Lets take the example of browserify-swap. With this I want to swap out modules when a certain configuration applies. So it would be called with all resolved files and try to match the regex and depending on the result apply a transform or just pass it through.

{
  "browserify": {
    "global-transform": [ "browserify-swap" ]
  },
  "browserify-swap": {
    "dev": {
      ".*node_modules\/xtend\/\\S+\\.js$": "./swap/other-xtend.js"
    },
    "test": {
       ".*node_modules\/xtend\/\\S+\\.js$": "./swap/stubable-xtend.js"
    }
  }
}

Swapping makes sense for different use cases:

  • only pulling large modules needed for diagnostics when a flag is set and otherwise replacing with empty stub, greatly speeding up bundling time when it's not needed

    • good example is hyperwatch which depends on hypernal (huge)

  • stubbing out modules during testing

However I think there will be other situations where global transforms would be a great help.

To avoid non-determinism, local transforms should always execute first, so that their input cannot be affected by a global transform getting in the middle.

Additionally global transforms only apply if the package.json that they are defined in is the root of the project (i.e. the current dir).

Most helpful comment

@substack So what about global-transforms in package.json stuff?

All 5 comments

Global transforms just landed in 3.17.0. I'm not sure about the package.json stuff but you can use them with -g or via the API by doing .transform({ global: true }, tr).

I've got a project in which I'm using browserify to package my code for the browser. I got it working by running all packages through --global-transform but it's very slow. b.transform(babelify, { global: true });. I'm wondering whether I can target the transform so it only applies to the node_modules/some_modules. Is this possible?

Very stupid of me, This one solves it https://github.com/substack/node-browserify#browserifytransform. You just need to add "browserify": { "transform": [ "babelify" ] } to the node_modules/some_modules/package.json

@substack So what about global-transforms in package.json stuff?

@pronebird See https://github.com/browserify/browserify/issues/583 for that.

@hung-phan Unless I've misunderstood... you probably shouldn't be editing anything inside node_modules; it won't be portable.

Was this page helpful?
0 / 5 - 0 ratings