browserify field flags to switch behavior based on dev/prod/...

[serapath]

Browserify has the awesome feature, that every dependency can specify it's own transforms in a "browserify" field in it's package.json 👍

My issue:

• While I'm developing I run watchify and don't need minification or extensive testing or transpilation of modern es6 code and beyond and I want my pipelin to be fast.
• When I'm building for production, I want minification and transpilation es6toes5 for legacy browser support and a separate source maps file and so on...

Idea:
Is it or would it be possible to switch the behavior of a module's "browserify pipeline" as defined in it's "browserify field" based on environment variables or alternatively based on spec?

I would be willing to try to come up with an implementation and a pull request - but i first want to make sure if this would be acceptable and if so - what would be the best way :-)

[MellowMelon]

To ignore the transform/browserify fields of other package.json files, pass transformKey: false when constructing the browserify object.

This was very recently added and apparently not documented. Check the last commit that changed this repository's index.js. That commit also has a test you can look at.

[serapath]

I don't want to ignore the transform of browserify fields of other package.json files. It's awesome and i like it.

I just would like to customize the transforms listed in each projects package.json based on environment variables, e.g. production, development, staging, ...

For example, in "production" i want to do minification or polyfilling or a lot of more things that i might need in order to support old browsers and improve performance, etc...

In "development" i dont care to minify or to polyfill, because i'm developing on a modern browser. So i'd like to skip a lot of transforms to speed up the build process, because i want to live-reload on every file save and that should be fast.

babel for example seems to support something like env options https://babeljs.io/docs/usage/babelrc/

Otherwise, I am just wondering if such a feature would fit with browserify and if not if maybe things can be done differently or in other places, so that there is no need for those flags.

Sorry, scratch the above - didn't get your answer the first time - please see below

[serapath]

Oh great. I re-read what you were saying, so basically a package.json could look like:

{


  "browserify": {
    "transform": [
      ["babelify", {
        "presets": ["es2015"]
      }]
    ],
    "production": [
      ["babelify", {
        "plugins": [ "yo-yoify" ],
        "presets": ["es2015"]
      }],
      ["uglifyify"]
    ]
  },
  "scripts": {
    "start": "browserify index.js > bundle.js",
    "build": "browserify --transformKey=browserify --transformKey=production index.js > bundle.js"
  }


}

I'll try that.

Update2:
Ok, it's not working from the command line, so I'll make a pull request to add the feature.

I also think it's kind of crazy to add --transformKey twice to get the correct array, so i'll assume, somebody who uses the flag from the command line will always nest his custom keys under "browserify", so the following package.json would work...

{


  "browserify": {
    "transform": [
      ["babelify", {
        "presets": ["es2015"]
      }]
    ],
    "production": [
      ["babelify", {
        "plugins": [ "yo-yoify" ],
        "presets": ["es2015"]
      }],
      ["uglifyify"]
    ]
  },
  "scripts": {
    "start": "browserify index.js > bundle.js",
    "dev": "browserify --transformKey=transform index.js > bundle.js # same as `npm start`",
    "build": "browserify --transformKey=production index.js > bundle.js"
  }


}

If this is cool, I'd like to make a pull request :-)

[serapath]

Here you go #1709 - changed the proposal from above slightly to use:

• browserify index.js --transform-key=production > bundle.js
  This is probably better than camelcase...

Maybe it would be even better to name it --mode or short -m instead, because --transform-key is kind of long.

[serapath]

ok got merged. perfect :-)