CODEWITHSUNDEEP
jquerynpmgulpbrowserify
Ivin
Ivin

Reputation: 4815

What does "browserify": { "transform": [ "browserify-shim" ] } mean?

I know what browserify is and what browserify-shim is for. But I dont understand the syntax.

I have already specified below one in the package.json

"browserify-shim": {
    "jquery": "$"
  }

-- which means to say, convert jQuery into a requirable module. Then what purpose does "transform": ["browserify-shim"] has here?

Couldnt figure it out from the docs. Can anyone help me understand?

EDIT

Incase if my question is not clear,

“browserify”: { “transform”: [ “browserify-shim” ] }

What does this snippet of code mean? What does transform do?

Upvotes: 2

Views: 908

Answers (2)

Josh
Josh

Reputation: 756

When you have "transform" in your package.json, it means that this transform will be automatically applied.

So your example is the equivalent of running browserify -t browserify-shim.

If you have 

"transform": [
  "a",
  "b",
  "c"
]

and run browserify mycode.js > bundle.js, the transforms a, b and c will be applied.

Using the "transform" field also means that you can distribute packages on npm that include transforms as dependencies. And when somebody else wants to include your package in their browserify bundle the correct transforms will be applied.

Useful docs here: https://github.com/substack/browserify-handbook#browserifytransform-field

Upvotes: 0

voor
voor

Reputation: 101

Edit:

Transforms are processes added to browserify to modify the browserify process. Some other popular transforms are listed here

Original (wrong) response:

What you are doing is taking the jquery package from NPM (or the alias in the browser section of your package.json) and exposing the variable $ to the entire browserify bundle.

If I was to 

npm install moment --save

And then add the following to the browserify-shim:

"moment": "moment"

I would be exposing moment.js to the entire bundle as well.

Something to keep in mind is that jQuery is a properly formatted, so instead of using browserify-shim you could also put this in your main app:

  var $ = window.jQuery = require("jquery");

Upvotes: 1

Related Questions