├── .gitignore
├── .jshintrc
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── examples
├── dependency-with-global
│ ├── .bin
│ │ └── browserify
│ ├── Readme.md
│ ├── build-diag.js
│ ├── build.js
│ ├── cli-diag.sh
│ ├── cli.sh
│ ├── index.html
│ ├── js
│ │ └── entry.js
│ └── package.json
├── expose-jquery
│ ├── .bin
│ │ └── browserify
│ ├── Readme.md
│ ├── build-diag.js
│ ├── build.js
│ ├── cli-diag.sh
│ ├── cli.sh
│ ├── index.html
│ ├── js
│ │ └── entry.js
│ ├── node_modules
│ │ ├── .bin
│ │ ├── browserify
│ │ └── browserify-shim
│ └── package.json
├── shim-jquery-external
│ ├── Readme.md
│ ├── build-diag.js
│ ├── config
│ │ └── shim.js
│ ├── index.html
│ ├── js
│ │ ├── entry.js
│ │ └── vendor
│ │ │ └── .gitignore
│ └── package.json
├── shim-jquery-ui
│ ├── cli-diag.sh
│ ├── index.html
│ ├── js
│ │ └── entry.js
│ └── package.json
└── shim-jquery
│ ├── Readme.md
│ ├── build-diag.js
│ ├── build.js
│ ├── cli-diag.sh
│ ├── cli.sh
│ ├── index.html
│ ├── js
│ ├── entry.js
│ └── vendor
│ │ └── .gitignore
│ └── package.json
├── index.js
├── lib
├── debug.js
├── parse-inline-shims.js
└── resolve-shims.js
├── package.json
└── test
├── bower
├── components
│ ├── jquery-ui
│ │ ├── package.json
│ │ └── ui
│ │ │ └── jquery.ui.position.js
│ └── jquery
│ │ ├── jquery.js
│ │ └── package.json
├── index.js
├── node_modules
│ └── browserify-shim
└── package.json
├── bundle-deps.js
├── bundle-ember-bower.js
├── bundle-expose-globals.js
├── bundle-invalid-require.js
├── bundle-multideps.js
├── bundle-nodeps.js
├── bundle-pack-bower.js
├── bundle-packs.js
├── deps
├── extshim
│ ├── config
│ │ └── shim.js
│ ├── main.js
│ ├── package.json
│ └── vendor
│ │ ├── non-cjs-dep.js
│ │ └── non-cjs.js
├── inlineshim
│ ├── main.js
│ ├── package.json
│ └── vendor
│ │ ├── non-cjs-dep.js
│ │ └── non-cjs.js
└── node_modules
│ └── browserify-shim
├── ember-bower
├── bower_components
│ ├── ember
│ │ ├── ember.js
│ │ └── package.json
│ ├── handlebars
│ │ └── handlebars.js
│ └── jquery
│ │ ├── jquery.js
│ │ └── package.json
├── main.js
├── node_modules
│ └── browserify-shim
└── package.json
├── exposify
├── extshim
│ ├── config
│ │ └── shim.js
│ ├── main.js
│ ├── package.json
│ └── vendor
│ │ └── non-cjs.js
├── inlineshim
│ ├── main.js
│ ├── package.json
│ └── vendor
│ │ └── non-cjs.js
└── node_modules
│ └── browserify-shim
├── invalid-require
├── main.js
├── node_modules
│ └── browserify-shim
├── non-cjs.js
└── package.json
├── multideps
├── extshim
│ ├── config
│ │ └── shim.js
│ ├── main.js
│ ├── package.json
│ └── vendor
│ │ ├── non-cjs-core.js
│ │ ├── non-cjs-dep.js
│ │ └── non-cjs.js
├── inlineshim
│ ├── main.js
│ ├── package.json
│ └── vendor
│ │ ├── non-cjs-core.js
│ │ ├── non-cjs-dep.js
│ │ └── non-cjs.js
└── node_modules
│ └── browserify-shim
├── nodeps
├── extshim-exposed
│ ├── config
│ │ └── shim.js
│ ├── main.js
│ ├── package.json
│ └── vendor
│ │ └── non-cjs.js
├── extshim
│ ├── config
│ │ └── shim.js
│ ├── main.js
│ ├── package.json
│ └── vendor
│ │ └── non-cjs.js
├── inlineshim-exposed
│ ├── main.js
│ ├── package.json
│ └── vendor
│ │ └── non-cjs.js
├── inlineshim
│ ├── main.js
│ ├── package.json
│ └── vendor
│ │ └── non-cjs.js
└── node_modules
│ └── browserify-shim
├── packs
├── main.js
├── node_modules
│ ├── browserify-shim
│ ├── sub1
│ │ ├── main.js
│ │ ├── package.json
│ │ └── vendor
│ │ │ ├── non-cjs-dep.js
│ │ │ └── non-cjs.js
│ └── sub2
│ │ ├── config
│ │ └── shim.js
│ │ ├── main.js
│ │ ├── package.json
│ │ └── vendor
│ │ ├── non-cjs-dep.js
│ │ └── non-cjs.js
├── package.json
└── vendor
│ └── non-cjs.js
├── parse-inline-shim.js
├── resolve-shims-bower.js
├── resolve-shims.js
└── shim
├── fixtures
├── entry-requires-depend-on-jquery-and-_.js
├── entry-requires-depend-on-jquery.js
├── entry-requires-jquery.js
├── entry-requires-lib-with-global-problem.js
├── entry-requires-root-level-var.js
├── entry-requires-this-iife.js
├── foo.js
└── shims
│ ├── crippled-jquery.js
│ ├── lib-depending-on-jquery-and-_.js
│ ├── lib-depending-on-jquery.js
│ ├── lib-exporting-_.js
│ ├── lib-with-exports-define-global-problem.js
│ ├── root-level-var.js
│ └── this-iife.js
├── shim-depends.js
├── shim-exports-define-window.js
├── shim-impress.js
├── shim-jquery.js
├── shim-root-level-var.js
├── shim-underscore.js
├── shim-zepto.js
├── shim.js
└── utils
├── browserify-version.js
└── test-lib.js
/.gitignore:
--------------------------------------------------------------------------------
1 | lib-cov
2 | *.seed
3 | *.log
4 | *.csv
5 | *.dat
6 | *.out
7 | *.pid
8 | *.gz
9 |
10 | pids
11 | logs
12 | results
13 |
14 | tmp
15 |
16 | npm-debug.log
17 | node_modules
18 |
19 | bundle.js
20 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "curly": false,
3 | "noempty": true,
4 | "newcap": true,
5 | "eqeqeq": true,
6 | "eqnull": true,
7 | "undef": true,
8 | "devel": true,
9 | "node": true,
10 | "browser": true,
11 | "evil": false,
12 | "latedef": false,
13 | "nonew": true,
14 | "immed": true,
15 | "smarttabs": true,
16 | "strict": true,
17 | "laxcomma": true,
18 | "laxbreak": true,
19 | "asi": true
20 | }
21 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | lib-cov
2 | *.seed
3 | *.log
4 | *.csv
5 | *.dat
6 | *.out
7 | *.pid
8 | *.gz
9 |
10 | pids
11 | logs
12 | results
13 |
14 | tmp
15 |
16 | npm-debug.log
17 | node_modules
18 |
19 | bundle.js
20 |
21 | test/
22 | examples/
23 | .npmignore
24 | .jshintrc
25 | .travis.yml
26 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - iojs
4 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2012 Thorsten Lorenz.
2 | All rights reserved.
3 |
4 | Permission is hereby granted, free of charge, to any person
5 | obtaining a copy of this software and associated documentation
6 | files (the "Software"), to deal in the Software without
7 | restriction, including without limitation the rights to use,
8 | copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the
10 | Software is furnished to do so, subject to the following
11 | conditions:
12 |
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
18 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
20 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
21 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
22 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
23 | OTHER DEALINGS IN THE SOFTWARE.
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # browserify-shim [](http://travis-ci.org/thlorenz/browserify-shim)
2 |
3 | ### Make CommonJS-Incompatible Files Browserifyable
4 |
5 | #### package.json
6 |
7 | ```json
8 | {
9 | "main": "./js/entry.js",
10 | "browser": {
11 | "jquery": "./js/vendor/jquery.js"
12 | },
13 | "browserify-shim": {
14 | "jquery": "$",
15 | "three": "global:THREE"
16 | },
17 | "browserify": {
18 | "transform": [ "browserify-shim" ]
19 | },
20 | "dependencies": {
21 | "browserify-shim": "~3.2.0"
22 | }
23 | }
24 | ```
25 |
26 | browserify . -d -o bundle.js
27 |
28 |
29 |
30 | **Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)*
31 |
32 | - [Installation](#installation)
33 | - [Features](#features)
34 | - [API](#api)
35 | - [You Will Always](#you-will-always)
36 | - [1. Install browserify-shim dependency](#1-install-browserify-shim-dependency)
37 | - [2. Register browserify-shim as a transform with browserify](#2-register-browserify-shim-as-a-transform-with-browserify)
38 | - [3. Provide browserify-shim config](#3-provide-browserify-shim-config)
39 | - [Short Form vs. Long Form config](#short-form-vs-long-form-config)
40 | - [You will sometimes](#you-will-sometimes)
41 | - [a) Expose global variables via `global:*`](#a-expose-global-variables-via-global)
42 | - [1. add script tag for library you want to expose](#1-add-script-tag-for-library-you-want-to-expose)
43 | - [2. Add expose global config to `package.json`](#2-add-expose-global-config-to-packagejson)
44 | - [2.a. Add expose global config to external shim config](#2a-add-expose-global-config-to-external-shim-config)
45 | - [3. Require library by the name it was exposed as](#3-require-library-by-the-name-it-was-exposed-as)
46 | - [Why not just `var THREE = window.THREE`?](#why-not-just-var-three-=-windowthree)
47 | - [b) Use aliases](#b-use-aliases)
48 | - [c) Provide an external shim config](#c-provide-an-external-shim-config)
49 | - [d) Diagnose what browserify-shim is doing](#d-diagnose-what-browserify-shim-is-doing)
50 | - [Multi Shim Example including dependencies](#multi-shim-example-including-dependencies)
51 | - [a) Config inside `package.json` without aliases](#a-config-inside-packagejson-without-aliases)
52 | - [b) Config inside `package.json` with aliases](#b-config-inside-packagejson-with-aliases)
53 | - [c) Config inside `./config/shim.js` without aliases](#c-config-inside-configshimjs-without-aliases)
54 | - [`package.json`](#packagejson)
55 | - [`shim.js`](#shimjs)
56 | - [More Examples](#more-examples)
57 |
58 |
59 |
60 | ## Installation
61 |
62 | npm install browserify browserify-shim
63 |
64 | *For a version compatible with browserify@1.x run `npm install browserify-shim@1.x` instead.*
65 |
66 | *For a version compatible with the [v2 API](https://github.com/thlorenz/browserify-shim/tree/v2#api) `npm install browserify-shim@2.x` instead.*
67 |
68 | ## Features
69 |
70 | The core features of browserify-shim are:
71 |
72 | - Shims **non-CommonJS** modules in order for them to be **browserified** by specifying an alias, the path to the file,
73 | and the identifier under which the module attaches itself to the global `window` object.
74 | - Includes `depends` for shimming libraries that depend on other libraries being in the global namespace.
75 | - applies shims configured inside the dependencies of your package
76 |
77 | Additionally, it handles the following real-world edge cases:
78 |
79 | - Modules that just declare a `var foo = ...` on the script level and assume it gets attached to the `window` object.
80 | Since the only way they will ever be run is in the global context — "ahem, … NO?!"
81 | - Makes `define` and also `module` be `undefined`, in order to fix [improperly-authored
82 | libraries](https://github.com/mhemesath/r2d3/blob/918bd076e4f980722438b2594d1eba53a522ce75/r2d3.v2.js#L222) that need
83 | shimming but try anyway to use AMD or CommonJS. For more info read the comment inside [this
84 | fixture](https://github.com/thlorenz/browserify-shim/blob/master/test/shim/fixtures/shims/lib-with-exports-define-global-problem.js)
85 | - removes invalid requires, i.e. `require('jquery')` although `'jquery'` isn't installed due to the library being
86 | improperly published or *installed* incorrectly via a downloader like [bower](http://bower.io/)
87 |
88 | Since `browserify-shim` is a proper `browserify` transform you can publish packages with files that need to be shimmed,
89 | granted that you specify the shim config inside the `package.json`.
90 |
91 | When `browserify` resolves your package it will run the `browserify-shim` transform and thus shim what's necessary
92 | when generating the bundle.
93 |
94 | `browserify-shim` walks upwards from each source file and uses the first `"browserify-shim"` configuration it finds in a `package.json` file. You **can't** shim files outside your project from your project's package. You **can** add multiple `package.json` files as long as browserify-shim can always find a package above each source file with the right configuration.
95 |
96 | ## API
97 |
98 | ### You Will Always
99 |
100 | #### 1. Install browserify-shim dependency
101 |
102 | In most cases you want to install it as a [devDependency](https://npmjs.org/doc/json.html#devDependencies) via:
103 |
104 | npm install -D browserify-shim
105 |
106 | #### 2. Register browserify-shim as a transform with browserify
107 |
108 | Inside `package.json` add:
109 |
110 | ```json
111 | {
112 | "browserify": {
113 | "transform": [ "browserify-shim" ]
114 | }
115 | }
116 | ```
117 |
118 | Browserify transforms are run in order and may modify your source code along the way. You'll typically want to include browserify-shim last.
119 |
120 | #### 3. Provide browserify-shim config
121 |
122 | Inside `package.json` add:
123 |
124 | ```json
125 | {
126 | "browserify-shim": {
127 | "./js/vendor/jquery.js": "$",
128 | "three": "global:THREE"
129 | }
130 | }
131 | ```
132 |
133 | The above includes `./js/vendor/jquery.js` (relative to the `package.json`) in the bundle and exports `window.$`.
134 |
135 | Additionally it exposes `window.THREE` as `three`, so you can `var three = require('three')`. More info
136 | [below](#a-expose-global-variables-via-global).
137 |
138 | ##### Short Form vs. Long Form config
139 |
140 | Since `jquery` does not depend on other shimmed modules and thus has no `depends` field, we used the short form to
141 | specify its exports, however the example above is equivalent to:
142 |
143 | ```json
144 | {
145 | "browserify-shim": {
146 | "./js/vendor/jquery.js": { "exports": "$" }
147 | }
148 | }
149 | ```
150 |
151 | ### You will sometimes
152 |
153 | #### a) Expose global variables via `global:*`
154 |
155 | In some cases the libraries you are using are very large and you'd prefer to add them via a script tag instead to get
156 | the following benefits:
157 |
158 | - faster bundling times since the library is not included in the bundle
159 | - pull libraries from a [CDN](http://en.wikipedia.org/wiki/Content_delivery_network) which allows it to be pulled
160 | straight from the user's browser cache in case it was downloaded before
161 |
162 | We'll show how this works by taking the rather huge yet awesome `THREE.js` library as an example:
163 |
164 | ##### 1. add script tag for library you want to expose
165 |
166 | ```html
167 |
168 |
169 |
170 |
171 |
172 | ```
173 |
174 | ##### 2. Add expose global config to `package.json`
175 |
176 | ```json
177 | {
178 | "browserify-shim": {
179 | "three": "global:THREE"
180 | }
181 | }
182 | ```
183 |
184 | ##### 2.a. Add expose global config to external shim config
185 |
186 | In case you are using an external shim config, you may achieve the same by specifying the global via an `exports`.
187 |
188 | ```js
189 | module.exports = {
190 | 'three': { exports: 'global:THREE' }
191 | }
192 | ```
193 |
194 | [more about external configs here](#c-config-inside-configshimjs-without-aliases)
195 |
196 | **Note:** `THREE.js` attaches `window.THREE`.
197 |
198 | ##### 3. Require library by the name it was exposed as
199 |
200 | ```js
201 | var THREE = require('three');
202 | ```
203 |
204 | ##### Why not just `var THREE = window.THREE`?
205 |
206 | You want to avoid spreading the knowledge that `THREE` is a global and stay consistent in how you resolve dependencies.
207 | Additionally if `THREE` would ever be published to [npm](https://npmjs.org/) and you decide to install it from there,
208 | you don't have to change any of your code since it already is `require`ing it properly.
209 |
210 |
211 | #### b) Use aliases
212 |
213 | You may expose files under a different name via the [`browser` field](https://gist.github.com/defunctzombie/4339901#replace-specific-files---advanced) and refer to them under that alias in the shim config:
214 |
215 | ```json
216 | {
217 | "browser": {
218 | "jquery": "./js/vendor/jquery.js"
219 | },
220 | "browserify-shim": {
221 | "jquery": "$"
222 | }
223 | }
224 | ```
225 |
226 | This also allows you to require this module under the alias, i.e.: `var $ = require('jquery')`.
227 |
228 | #### c) Provide an external shim config
229 |
230 | ```json
231 | {
232 | "browserify-shim": "./config/shim.js"
233 | }
234 | ```
235 |
236 | The external shim format is very similar to the way in which the shim is specified inside the `package.json`. See
237 | [below](#c-config-inside-configshimjs-without-aliases) for more details.
238 |
239 | #### d) Diagnose what browserify-shim is doing
240 |
241 | You may encounter problems when your shim config isn't properly setup. In that case you can diagnose them via the
242 | `BROWSERIFYSHIM_DIAGNOSTICS` flag.
243 |
244 | Simply set the flag when building your bundle, i.e.:
245 |
246 | BROWSERIFYSHIM_DIAGNOSTICS=1 browserify -d . -o js/bundle.js
247 |
248 | or in a `build.js` script add: `process.env.BROWSERIFYSHIM_DIAGNOSTICS=1` to the top.
249 |
250 | ## Multi Shim Example including dependencies
251 |
252 | Some libraries depend on other libraries to have attached their exports to the window for historical reasons :(.
253 | (Hopefully soon we can truly say that this bad design is history.)
254 |
255 | In this contrived example we are shimming four libraries since none of them are commonJS compatible:
256 |
257 | - **x** exports **window.$**
258 | - **x-ui** exports nothing since it just **attaches itself to x**. Therefore x-ui depends on x.
259 | - **y** exports **window.Y** and also **depends on x** expecting to find it on the window as $.
260 | - **z** exports **window.zorro** and **depends on x and y**. It expects to find x on the window as $, but y on the window as YNOT,
261 | which is actually different than the name under which y exports itself.
262 |
263 | We will be using the `depends` field in order to ensure that a dependency is included and initialized before a library
264 | that depends on it is initialized.
265 |
266 | Below are three examples, each showing a way to properly shim the above mentioned modules.
267 |
268 | ### a) Config inside `package.json` without aliases
269 |
270 | ```json
271 | {
272 | "browserify": {
273 | "transform": [ "browserify-shim" ]
274 | },
275 | "browserify-shim": {
276 | "./vendor/x.js" : "$",
277 | "./vendor/x-ui.js" : { "depends": [ "./vendor/x.js" ] },
278 | "./vendor/y.js" : { "exports": "Y", "depends": [ "./vendor/x.js:$" ] },
279 | "./vendor/z.js" : { "exports": "zorro", "depends": [ "./vendor/x.js:$", "./vendor/y.js:YNOT" ] }
280 | }
281 | }
282 | ```
283 |
284 | **Note:** the `depends` array consists of entries of the format `path-to-file:export`
285 |
286 | ### b) Config inside `package.json` with aliases
287 |
288 | ```json
289 | {
290 | "browserify": {
291 | "transform": [ "browserify-shim" ]
292 | },
293 | "browser": {
294 | "x" : "./vendor/x.js",
295 | "x-ui" : "./vendor/x-ui.js",
296 | "y" : "./vendor/y.js",
297 | "z" : "./vendor/z.js"
298 | },
299 | "browserify-shim": {
300 | "x" : "$",
301 | "x-ui" : { "depends": [ "x" ] },
302 | "y" : { "exports": "Y", "depends": [ "x:$" ] },
303 | "z" : { "exports": "zorro", "depends": [ "x:$", "y:YNOT" ] }
304 | }
305 | }
306 | ```
307 |
308 | **Note:** the `depends` entries make use of the aliases as well `alias:export`
309 |
310 | ### c) Config inside `./config/shim.js` without aliases
311 |
312 | #### `package.json`
313 |
314 | ```json
315 | {
316 | "browserify": {
317 | "transform": [ "browserify-shim" ]
318 | },
319 | "browserify-shim": "./config/shim.js"
320 | }
321 | ```
322 |
323 | #### `shim.js`
324 |
325 | ```js
326 | module.exports = {
327 | '../vendor/x.js' : { 'exports': '$' },
328 | '../vendor/x-ui.js' : { 'depends': { '../vendor/x.js': null } },
329 | '../vendor/y.js' : { 'exports': 'Y', 'depends': { '../vendor/x.js': '$' } },
330 | '../vendor/z.js' : { 'exports': 'zorro', 'depends': { '../vendor/x.js': '$', '../vendor/y.js': 'YNOT' } }
331 | }
332 | ```
333 |
334 | **Note:** all paths are relative to `./config/shim.js` instead of the `package.json`.
335 |
336 | The main difference to `a)` is the `depends` field specification. Instead it being an array of strings it expresses its dependencies as a hashmap:
337 |
338 | - **key:** `path-to-file`
339 | - **value:** the name under which it is expected to be attached on the window
340 |
341 | ## More Examples
342 |
343 | - [shim-jquery](https://github.com/thlorenz/browserify-shim/tree/master/examples/shim-jquery)
344 | - [expose-jquery](https://github.com/thlorenz/browserify-shim/tree/master/examples/expose-jquery)
345 | - [shim-jquery-external](https://github.com/thlorenz/browserify-shim/tree/master/examples/shim-jquery-external)
346 | - the [tests](https://github.com/thlorenz/browserify-shim/tree/master/test) are a great resource to investigate the
347 | different ways to configure shims and to understand how shims are applied to packages found inside the `node_modules`
348 | of your package
349 |
--------------------------------------------------------------------------------
/examples/dependency-with-global/.bin/browserify:
--------------------------------------------------------------------------------
1 | ../browserify/bin/cmd.js
--------------------------------------------------------------------------------
/examples/dependency-with-global/Readme.md:
--------------------------------------------------------------------------------
1 | # Browserify-Shim
2 |
3 | This example demonstrates how to create a browserify-aware dependency with a dependency on a global.
4 |
5 | The important part is in `node_modules/my-3d-library/package.json`:
6 |
7 | ```json
8 | "browserify-shim": {
9 | "three": "global:THREE"
10 | },
11 | "browserify": {
12 | "transform": [
13 | "browserify-shim"
14 | ]
15 | }
16 | ```
17 |
18 | ### Bundling via the command line
19 |
20 | Given this config you can build the bundle via:
21 |
22 | browserify -d . > js/bundle.js
23 |
24 | demonstrated [here](https://github.com/thlorenz/browserify-shim/blob/master/examples/expose-jquery/cli.sh).
25 |
26 | If you want to turn on browserify shim diagnostics messages set the `BROWSERIFYSHIM_DIAGNOSTICS` environment variable
27 | when bundling i.e.:
28 |
29 | BROWSERIFYSHIM_DIAGNOSTICS=1 browserify -d . > js/bundle.js
30 |
31 | demonstrated [here](https://github.com/thlorenz/browserify-shim/blob/master/examples/expose-jquery/cli-diag.sh).
32 |
33 | **Note** that in both cases the `-d` flag is added as well in order to turn on browserify sourcemaps.
34 |
35 | **Note** `.` tells browserify to use the current dir as the root of the bundling chain. As a result it finds `"main":
36 | "./js/entry.js"` in the `package.json` and thus uses that as the entry point.
37 |
38 | ### Bundling via a `.js` script
39 |
40 | Alternatively you can write a short `build.js` to perform the bundling step:
41 |
42 | ```js
43 | browserify()
44 | .require(require.resolve('./'), { entry: true })
45 | .bundle({ debug: true })
46 | .on('error', console.error.bind(console))
47 | .pipe(fs.createWriteStream(path.join(__dirname, 'js', 'bundle.js'), 'utf8'))
48 | ```
49 |
50 | demonstrated [here](https://github.com/thlorenz/browserify-shim/blob/master/examples/expose-jquery/build.js).
51 |
52 | To run this example:
53 |
54 | npm install browserify-shim
55 | npm explore browserify-shim
56 |
57 | Then:
58 |
59 | npm run dependency-with-global
60 |
61 | Or to see diagnostic messages:
62 |
63 | npm run dependency-with-global-diag
64 |
--------------------------------------------------------------------------------
/examples/dependency-with-global/build-diag.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | process.env.BROWSERIFYSHIM_DIAGNOSTICS = 1;
4 |
5 | var path = require('path')
6 | , fs = require('fs')
7 | , browserify = require('browserify')
8 | ;
9 |
10 | (function bundle() {
11 | // This is function is the important part and should be similar to what you would use for your project
12 | var builtFile = path.join(__dirname, 'js', 'bundle.js');
13 |
14 | browserify()
15 | // this resolves main file of our package
16 | .require(require.resolve('./'), { entry: true })
17 | .bundle({ debug: true })
18 | .on('end', function () {
19 | console.log('Build succeeded, open index.html to see the result.');
20 | })
21 | .on('error', console.error.bind(console))
22 | .pipe(fs.createWriteStream(builtFile, 'utf8'))
23 | })();
24 |
--------------------------------------------------------------------------------
/examples/dependency-with-global/build.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var path = require('path')
4 | , fs = require('fs')
5 | , browserify = require('browserify')
6 | ;
7 |
8 | (function bundle() {
9 | // This is function is the important part and should be similar to what you would use for your project
10 | var builtFile = path.join(__dirname, 'js', 'bundle.js');
11 |
12 | browserify()
13 | // this resolves main file of our package
14 | .require(require.resolve('./'), { entry: true })
15 | .bundle({ debug: true })
16 | .on('end', function () {
17 | console.log('Build succeeded, open index.html to see the result.');
18 | })
19 | .on('error', console.error.bind(console))
20 | .pipe(fs.createWriteStream(builtFile, 'utf8'))
21 | })();
22 |
--------------------------------------------------------------------------------
/examples/dependency-with-global/cli-diag.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 |
3 | BROWSERIFYSHIM_DIAGNOSTICS=1 ./node_modules/.bin/browserify -d . > js/bundle.js
4 |
5 | open index.html
6 |
--------------------------------------------------------------------------------
/examples/dependency-with-global/cli.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 |
3 | ./node_modules/.bin/browserify -d . > js/bundle.js
4 |
5 | open index.html
6 |
--------------------------------------------------------------------------------
/examples/dependency-with-global/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | dependency with global example
6 |
7 |
8 |
9 |
10 |
Welcome to the browserify-shim dependency with global Example
11 |
You are using Three.js version:
12 |
13 |
14 | If you open your devtools and find entry.js or bundle.js you will see that require('three') was replaced with (window.THREE).
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/examples/dependency-with-global/js/entry.js:
--------------------------------------------------------------------------------
1 | var my3dLibrary = require('my-3d-library')
2 | , $ = require('jquery');
3 |
4 | $('#three-version').text('r' + my3dLibrary.threeVersion);
5 |
--------------------------------------------------------------------------------
/examples/dependency-with-global/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dependency-with-global",
3 | "version": "0.0.0",
4 | "description": "Example of using browserify-shim with a dependency that requires a separately loaded global.",
5 | "main": "./js/entry.js",
6 | "browserify-shim": {
7 | "jquery": "global:$"
8 | },
9 | "browserify": {
10 | "transform": [
11 | "browserify-shim"
12 | ]
13 | },
14 | "repository": "",
15 | "author": "Paul Melnikow",
16 | "license": "BSD",
17 | "dependencies": {
18 | "request": "~2.88.0"
19 | },
20 | "devDependencies": {
21 | "browserify": "~2.36.1",
22 | "browserify-shim": "~3.2.0"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/examples/expose-jquery/.bin/browserify:
--------------------------------------------------------------------------------
1 | ../browserify/bin/cmd.js
--------------------------------------------------------------------------------
/examples/expose-jquery/Readme.md:
--------------------------------------------------------------------------------
1 | # Browserify-Shim expose jquery
2 |
3 | This example demonstrates expsing jquery by adding expose information to the `package.json`.
4 |
5 | The following config included in the
6 | [`package.json`](https://github.com/thlorenz/browserify-shim/blob/master/examples/expose-jquery/package.json) of this
7 | example project is needed to ensure that browserify runs the `browerify-shim` transform when bundling this project.
8 |
9 | ```json
10 | {
11 | "main": "./js/entry.js",
12 | "browserify-shim": {
13 | "jquery": "global:$"
14 | },
15 | "browserify": {
16 | "transform": [ "browserify-shim" ]
17 | }
18 | }
19 | ```
20 |
21 | **Note:** the `global:` prefix tells browserify-shim that it should expose the `$` attached to the `window` as `jquery`.
22 |
23 | ### Bundling via the command line
24 |
25 | Given this config you can build the bundle via:
26 |
27 | browserify -d . > js/bundle.js
28 |
29 | demonstrated [here](https://github.com/thlorenz/browserify-shim/blob/master/examples/expose-jquery/cli.sh).
30 |
31 | If you want to turn on browserify shim diagnostics messages set the `BROWSERIFYSHIM_DIAGNOSTICS` environment variable
32 | when bundling i.e.:
33 |
34 | BROWSERIFYSHIM_DIAGNOSTICS=1 browserify -d . > js/bundle.js
35 |
36 | demonstrated [here](https://github.com/thlorenz/browserify-shim/blob/master/examples/expose-jquery/cli-diag.sh).
37 |
38 | **Note** that in both cases the `-d` flag is added as well in order to turn on browserify sourcemaps.
39 |
40 | **Note** `.` tells browserify to use the current dir as the root of the bundling chain. As a result it finds `"main":
41 | "./js/entry.js"` in the `package.json` and thus uses that as the entry point.
42 |
43 | ### Bundling via a `.js` script
44 |
45 | Alternatively you can write a short `build.js` to perform the bundling step:
46 |
47 | ```js
48 | browserify()
49 | .require(require.resolve('./'), { entry: true })
50 | .bundle({ debug: true })
51 | .on('error', console.error.bind(console))
52 | .pipe(fs.createWriteStream(path.join(__dirname, 'js', 'bundle.js'), 'utf8'))
53 | ```
54 |
55 | demonstrated [here](https://github.com/thlorenz/browserify-shim/blob/master/examples/expose-jquery/build.js).
56 |
57 | To run this example:
58 |
59 | npm install browserify-shim
60 | npm explore browserify-shim
61 |
62 | Then:
63 |
64 | npm run expose-jquery
65 |
66 | Or to see diagnostic messages:
67 |
68 |
69 | npm run expose-jquery-diag
70 |
--------------------------------------------------------------------------------
/examples/expose-jquery/build-diag.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | process.env.BROWSERIFYSHIM_DIAGNOSTICS = 1;
4 |
5 | var path = require('path')
6 | , fs = require('fs')
7 | , browserify = require('browserify')
8 | ;
9 |
10 | (function bundle() {
11 | // This is function is the important part and should be similar to what you would use for your project
12 | var builtFile = path.join(__dirname, 'js', 'bundle.js');
13 |
14 | browserify()
15 | // this resolves main file of our package
16 | .require(require.resolve('./'), { entry: true })
17 | .bundle({ debug: true })
18 | .on('end', function () {
19 | console.log('Build succeeded, open index.html to see the result.');
20 | })
21 | .on('error', console.error.bind(console))
22 | .pipe(fs.createWriteStream(builtFile, 'utf8'))
23 | })();
24 |
--------------------------------------------------------------------------------
/examples/expose-jquery/build.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var path = require('path')
4 | , fs = require('fs')
5 | , browserify = require('browserify')
6 | ;
7 |
8 | (function bundle() {
9 | // This is function is the important part and should be similar to what you would use for your project
10 | var builtFile = path.join(__dirname, 'js', 'bundle.js');
11 |
12 | browserify()
13 | // this resolves main file of our package
14 | .require(require.resolve('./'), { entry: true })
15 | .bundle({ debug: true })
16 | .on('end', function () {
17 | console.log('Build succeeded, open index.html to see the result.');
18 | })
19 | .on('error', console.error.bind(console))
20 | .pipe(fs.createWriteStream(builtFile, 'utf8'))
21 | })();
22 |
--------------------------------------------------------------------------------
/examples/expose-jquery/cli-diag.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 |
3 | BROWSERIFYSHIM_DIAGNOSTICS=1 ./node_modules/.bin/browserify -d . > js/bundle.js
4 |
5 | open index.html
6 |
--------------------------------------------------------------------------------
/examples/expose-jquery/cli.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 |
3 | ./node_modules/.bin/browserify -d . > js/bundle.js
4 |
5 | open index.html
6 |
--------------------------------------------------------------------------------
/examples/expose-jquery/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | jquery shim example
6 |
7 |
8 |
9 |
Welcome to the browserify-shim expose jquery Example
10 |
You are using jquery version:
11 |
12 |
13 | If you open your devtools and find entry.js or bundle.js you will see that require('jquery') was replaced with (window.$).
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/examples/expose-jquery/js/entry.js:
--------------------------------------------------------------------------------
1 | var $ = require('jquery')
2 | , jqVersion = $().jquery;
3 |
4 | $('#jq-version').text(jqVersion);
5 |
--------------------------------------------------------------------------------
/examples/expose-jquery/node_modules/.bin:
--------------------------------------------------------------------------------
1 | ../../../node_modules/.bin
--------------------------------------------------------------------------------
/examples/expose-jquery/node_modules/browserify:
--------------------------------------------------------------------------------
1 | ../../../node_modules/browserify
--------------------------------------------------------------------------------
/examples/expose-jquery/node_modules/browserify-shim:
--------------------------------------------------------------------------------
1 | ../../../
--------------------------------------------------------------------------------
/examples/expose-jquery/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "shim-jquery",
3 | "version": "0.0.0",
4 | "description": "Example of using browserify-shim to expose jquery for use with browserify",
5 | "main": "./js/entry.js",
6 | "browserify-shim": {
7 | "jquery": "global:$"
8 | },
9 | "browserify": {
10 | "transform": [
11 | "browserify-shim"
12 | ]
13 | },
14 | "repository": "",
15 | "author": "Thorsten Lorenz",
16 | "license": "BSD",
17 | "dependencies": {
18 | "request": "~2.88.0"
19 | },
20 | "devDependencies": {
21 | "browserify": "~2.36.1",
22 | "browserify-shim": "~3.2.0"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/examples/shim-jquery-external/Readme.md:
--------------------------------------------------------------------------------
1 | # Browserify-Shim jquery with external shim file
2 |
3 | This example demonstrates shimming jquery by adding the shim information to an external `shim.js`.
4 |
5 | The following config included in the
6 | [`package.json`](https://github.com/thlorenz/browserify-shim/blob/master/examples/shim-jquery-external/package.json) of this
7 | example project is needed to ensure that browserify runs the `browerify-shim` transform when bundling this project,
8 | however in this case it **does not include the shim config**:
9 |
10 | ```json
11 | {
12 | "main": "./js/entry.js",
13 | "browserify-shim": "./config/shim.js",
14 | "browserify": {
15 | "transform": [
16 | "browserify-shim"
17 | ]
18 | }
19 | }
20 | ```
21 |
22 | As you can see the `browserify-shim` field points to the [external shim file](https://github.com/thlorenz/browserify-shim/blob/master/examples/shim-jquery-external/config/shim.js):
23 |
24 | ```js
25 | module.exports = {
26 | '../js/vendor/jquery.js': { exports: '$' }
27 | }
28 | ```
29 |
30 | **Note**: we didn't expose `./js/vendor/jquery.js` as `jquery` like we did in the [other jquery
31 | example](https://github.com/thlorenz/browserify-shim/tree/master/examples/shim-jquery). Instead our config spells out the
32 | path to `./js/vendor/jquery.js` relative to the `shim.js` file.
33 |
34 | As a result we also cannot just `require('jquery')` in our [entry.js](https://github.com/thlorenz/browserify-shim/blob/master/examples/shim-jquery-external/js/entry.js#L1), but have to spell out the relative path here as well, i.e.
35 | `var $ = require('./vendor/jquery')`.
36 |
37 | ### Bundling
38 |
39 | As explained in the [shim-jquery example](https://github.com/thlorenz/browserify-shim/tree/master/examples/shim-jquery)
40 | there are multiple ways to produce the bundle.
41 |
42 | browserify -d . > js/bundle.js
43 |
44 | Or with diagnostics:
45 |
46 | BROWSERIFYSHIM_DIAGNOSTICS=1 browserify -d . > js/bundle.js
47 |
48 | Alternatively you can write a short `build.js` to perform the bundling step:
49 |
50 | ```js
51 | browserify()
52 | .require(require.resolve('./'), { entry: true })
53 | .bundle({ debug: true })
54 | .on('error', console.error.bind(console))
55 | .pipe(fs.createWriteStream(path.join(__dirname, 'js', 'bundle.js'), 'utf8'))
56 | ```
57 |
--------------------------------------------------------------------------------
/examples/shim-jquery-external/build-diag.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | process.env.BROWSERIFYSHIM_DIAGNOSTICS = 1;
4 |
5 | var request = require('request')
6 | , fs = require('fs')
7 | , path = require('path')
8 | , browserify = require('browserify')
9 | ;
10 |
11 | function bundle() {
12 | // This is function is the important part and should be similar to what you would use for your project
13 | var builtFile = path.join(__dirname, 'js', 'bundle.js');
14 |
15 | browserify()
16 | // this resolves main file of our package
17 | .require(require.resolve('./'), { entry: true })
18 | .bundle({ debug: true })
19 | .on('end', function () {
20 | console.log('Build succeeded, open index.html to see the result.');
21 | })
22 | .on('error', console.error.bind(console))
23 | .pipe(fs.createWriteStream(builtFile, 'utf8'))
24 | }
25 |
26 | // Normally jquery.js would be in vendor folder already, but I wanted to avoid spreading jquerys all over github ;)
27 | // So lets download jquery and then run the bundler.
28 | request('http://code.jquery.com/jquery-1.8.3.min.js', function(err, resp, body) {
29 | var jqueryFile = path.join(__dirname, 'js/vendor/jquery.js');
30 |
31 | fs.writeFileSync(jqueryFile, body);
32 |
33 | bundle();
34 | });
35 |
--------------------------------------------------------------------------------
/examples/shim-jquery-external/config/shim.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | '../js/vendor/jquery.js': { exports: '$' }
3 | }
4 |
--------------------------------------------------------------------------------
/examples/shim-jquery-external/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | jquery shim example
6 |
7 |
8 |