Reactify transform not running when declared in package.json

Question

I'm trying to use the reactify transform with browserify and gulp.

This gulp task works:

return browserify({
        paths: ['./node_modules','./app/scripts/'],
        entries: ['./app/scripts/index.js'],
        transform: ['reactify'],
        debug: true
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('.tmp/scripts/'));

If i remove the transform key from gulp and move it to package.json:

  "browserify": {
    "transform": [
      ["reactify", {"es6": true}]
    ]
  }

The transform no longer runs (also tried without es6).

I'm using this yeoman generator: https://www.npmjs.org/package/generator-react-spa

Can anyone please explain?

Answer 1

The config in package.json is used in two situations:

• you use the browserify command line tool
• it's a package other than the current (e.g. react's package.json config is used when you require it)

If you're using the api, you manually specify transforms. To avoid repeating yourself:

var package = require('./package.json');
browserify({
        paths: ['./node_modules','./app/scripts/'],
        entries: ['./app/scripts/index.js'],
        transform: package.browserify.transform,
        debug: true
})

or more generally this, where merge can be your favorite merge implementation (e.g. _.defaults)

browserify(merge({}, package.browserify.transform, {
        paths: ['./node_modules','./app/scripts/'],
        entries: ['./app/scripts/index.js'],
        debug: true
}))

Answer 2

Maybe it is not supposed to work that way? I.e. browserify command doesn't read your own package.json, only the modules that are required (?).

https://github.com/substack/node-browserify#browserifytransform

Now when somebody require()s your module, brfs will automatically be applied to the files in your module without explicit intervention by the person using your module.