Creating a bundle supporting browserify and jQuery <script> tag loading

Question

I am working on a JavaScript library (bitcoin-prices.js) which I'd like to maintain using browserify. The library depends on jQuery. I would not like to force the library users move to browserify, but retain "drop one file + script tag" integration for those who have not drank the latest koolaid from JavaScript community.

My question is how to create a bundle.js with browserify, so that

• browserify-enabled users can install the package from NPM, having proper jQuery dependency

• Traditional users can as still use <script> tag drop in bundle, loading their jQuery wherever they want to with another <script> and the code still works fine

I guess some kind of boilerplate code is needed around $ = require('jquery.js')?

Answer 1

The convention is to do like this (without the .js):

var $ = require('jquery')

If you are using grunt-browserify (https://github.com/jmreidy/grunt-browserify),

Compile your library in this way:

  your_task:{
    src:'{{your library's js file}}',
    dest:'{{your library's browserified file}}',
    options: {
      external: ["jquery"]
    }
  },

At the home page, the sequence will then be like this:

<header>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script type="text/javascript" src="{{your library's browserified file}}"></script>
</header>

Hope this helps