Transform usage unclear with new browserify-shim setup

I’m not entirely sure if this falls more within the realm of a grunt-browserify or browserify-shim issue. Figured I’d toss it here first to see if you guys had any insight.

As far as I understand, the proper usage of browserify-shim, now that it’s been removed from grunt-browserify, is to install via npm and then include as a transform, as such:

grunt.initConfig({
    browserify: {
        libs: {
            src: ['./bower_components/angular/angular.js'],
            dest: './public/js/built/libs.js',
            options: {
                transform: ['browserify-shim']
            }
        }
    }
});

However, it’s completely unclear to me as to how to utilize config within browserify-shim then… It appears that they’ve moved to a model where all config is stored in package.json, and this is confirmed when attempting to run this task and getting:

Error: unable to find a browserify-shim config section in the package.json for...

And adding the config sections to package.json, while it gets rid of the error, doesn’t seem to actually work during the grunt-browserify build.

I think it’d be great to include a little more detail/documentation on how to use transforms like the shim, especially given how fast the modules are changing. I feel like I’m shooting in the dark with no documentation at all to go off.

[aearly]

I figured this out. You have to use an unholy union of configuration in the package json and in the Gruntfile. Here’s an example of how to make it work: (browserify-shim@3.4.1 grunt-browserify@2.0.7)

package.json

  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browser": {
    "jquery": "./public/vendor/jQuery/jquery-1.11.0.js",
    "lodash": "./node_modules/lodash/dist/lodash.compat.js",
    "Modernizr": "./public/vendor/Modernizr.js"
  },
  "browserify-shim": "./config/shims.js",

The browserify section is not needed – it’s just there for consistency. I’m relying on the external config file strategy for browserify-shim. The purpose of the browser field is to provide aliases that browserify-shim needs.

config/shims.js:

module.exports = {
  jquery: {exports: 'jQuery'},
  lodash: {exports: '_'},
  Modernizr: {exports: 'Modernizr'},
  'public/vendor/jQuery-ui/jquery-ui-1.8.0.min.js': {
    shortName: 'jquery-ui-1.8.0.min.js',
    depends: { jquery: 'jQuery', Modernizr: 'Modernizr' }
  },
  'public/vendor/jQuery/jquery.cookie.js': {
    shortName: 'jquery.cookie.js',
    depends: {jquery: 'jQuery', Modernizr: 'Modernizr'}
  },
  'public/vendor/jQuery/jquery.jqtransform.js': {
    shortName: 'jquery.jqtransform.js',
    depends: {jquery: 'jQuery', Modernizr: 'Modernizr'}
  }
}

If not for the browser section in the package.json, I would have had to provide the full paths to jquery, lodash, et al. I have to provide the full paths to the plugins. Keep in mind that currently with browserify-shim you can’t use the short-hand syntax in the external shim config strategy. The shortName property is something custom I added programmatically – I’ll use it later.

in Gruntfile.js:

    //...
    browserify: {
      main: {
        src: ["lib/index.js"],
        dest: "tmp/main.browserified.js",
        options: {
          transforms: ["shim"],
          alias: _.compact(_.map(shims_js, function (options, path) {
            if (!options.shortName) { return null; }
            return path + ":" + options.shortName;
          })),
          require: _.keys(package_json.browser))
        }
      }
    }
    //...

The complications come from the fact that grunt-browserify doesn’t use the browserify or browser config in the package.json, so you have to duplicate some of the configuration – luckily you can just load it and pass the info in. I use some aliases so I can mix in the jQuery plugins using a shorter name in my app JS. I then manually require all the other shimmed libraries defined in the browser field. Browserify itself will know to use the package.json browser field to resolve them, but something is lost somewhere in the grunt/shim hand-off requiring a manual, err, require().

Hopefully this will help you solve your problems. To make this simpler, I’d propose that grunt-browserify use the package.json fields as defaults for the Grunt configuration – it would make things clearer and more DRY.

[tleunen]

I’m using browserify-shim 3.8.2 and grunt-browserify 3.2.1 for a project and the config I gave above is working for me. I can’t test the same project with a more recent build of grunt browserify