browserify-adventure-jp
Version:
learn browserify with this educational adventure
53 lines (38 loc) • 1.67 kB
Plain Text
Some libraries are not commonJS compatible and need to be shimmed. In our case
we have library called spice-girls from the 90s which attaches a global to
`Girls` to the window but fails to export it.
In order to use this library with browserify we need to fix that.
You learned about and used transforms in earlier problems and now you get to
use another one.
browserify-shim will export globals defined by libraries for you.
Let's assume for a moment we have a library inside `./lib/foo.js` that attaches
a global `bar` to the `window`.
We'd first install `browserify-shim` via `npm install browserify-shim`
and then create a `package.json` with the following config:
```json
{
"browser": {
"foo": "./lib/foo.js"
},
"browserify": {
"transform": "browserify-shim"
},
"browserify-shim": {
"foo": "bar"
}
}
```
This teaches `browserify` where `foo.js` is and also tells it to run the
`browserify-shim` transform. It then informs `browserify-shim` which property
(`bar`) to export from the `window`.
If you want more documentation and examples, please find it here: https://github.com/thlorenz/browserify-shim
Your task is to create a similar `package.json` to tell `browserify` where the
Spice Girls are and how to transform them to be more modern.
Create a new directory for your solution and copy these files into it:
$SPICE_FILE
$MAIN_FILE
You should only create a package.json. Don't modify the javascript files.
To verify your solution, from your solution directory do:
browserify main.js | browserify-adventure verify
or to run your solution without verifying it, do:
browserify main.js | browserify-adventure run