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')?

Ian Lim · Accepted Answer · 2014-01-17 10:47:20Z

4

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

answered Jan 17, 2014 at 10:47

Ian Lim

4,2943 gold badges34 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related