cueedee/README.md

## README.md

      
    Raw
  

              README.md
            
          
    The setup below has been adapted from this browserify-shim example.
The code can simply require(jquery) because browserify-shim will replace these with window.jQuery, expecting that it will have been exposed there, loaded from a CDN via a <script> tag. So far, this part works.
The key difference with the original example is that this code also wants to require('backbone') (a regular npm install).
Backbone also does a require('jquery') and I was expecting this to just work too.
Except, that it doesn't, as this statement will demonstrate:
npm install
result:
> expose-jquery@0.0.0 install /tmp/expose-jquery
> browserify -d . > bundle.js

Error: Cannot find module 'jquery' from '/tmp/expose-jquery/node_modules/backbone'
    at /tmp/expose-jquery/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
    at process (/tmp/expose-jquery/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
    at ondir (/tmp/expose-jquery/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
    at load (/tmp/expose-jquery/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
    at onex (/tmp/expose-jquery/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
    at /tmp/expose-jquery/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:95:15)

I expect a perspective exist from which this makes sense, however I fail to see it.

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>browserify-shim expose jquery example</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
  <h1>Welcome to the browserify-shim expose jquery Example</h1>
  <p>You are using jquery version:</p>
  <span id='jq-version'></span>
  <p>
    If you open your devtools and find <code>entry.js</code> or <code>bundle.js</code> you will see that <code>require('jquery')</code> was replaced with <code>(window.jQuery)</code>.
  </p>
  <script type="text/javascript" src="./bundle.js"></script>
</body>
</html>

## index.js
var $ = require('jquery')
  , bb = require( 'backbone' )
  , jqVersion = $().jquery;

$('#jq-version').text(jqVersion);

## package.json
{
  "browserify-shim": {
    "jquery": "global:jQuery"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "dependencies": {
    "backbone": "^1.2.2"
  },
  "description": "Example of using browserify-shim to expose jquery for use with browserify",
  "devDependencies": {
    "browserify": "^11.0.1",
    "browserify-shim": "^3.8.10"
  },
  "license": "MIT",
  "main": "./index.js",
  "name": "expose-jquery",
  "private": true,
  "scripts": {
    "install": "browserify -d . > bundle.js"
  },
  "version": "0.0.0"
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>browserify-shim expose jquery example</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	</head>
	<body>
	<h1>Welcome to the browserify-shim expose jquery Example</h1>
	<p>You are using jquery version:</p>
	<span id='jq-version'></span>
	<p>
	If you open your devtools and find <code>entry.js</code> or <code>bundle.js</code> you will see that <code>require('jquery')</code> was replaced with <code>(window.jQuery)</code>.
	</p>
	<script type="text/javascript" src="./bundle.js"></script>
	</body>
	</html>
	var $ = require('jquery')
	, bb = require( 'backbone' )
	, jqVersion = $().jquery;

	$('#jq-version').text(jqVersion);
	{
	"browserify-shim": {
	"jquery": "global:jQuery"
	},
	"browserify": {
	"transform": [
	"browserify-shim"
	]
	},
	"dependencies": {
	"backbone": "^1.2.2"
	},
	"description": "Example of using browserify-shim to expose jquery for use with browserify",
	"devDependencies": {
	"browserify": "^11.0.1",
	"browserify-shim": "^3.8.10"
	},
	"license": "MIT",
	"main": "./index.js",
	"name": "expose-jquery",
	"private": true,
	"scripts": {
	"install": "browserify -d . > bundle.js"
	},
	"version": "0.0.0"
	}