Webpack loader to handle browserify transforms as intended.
Install the loader using npm:
npm install --save ify-loaderYou can then update your webpack.config.js in a similar fashion to the following to add browserify transform support to your project's dependencies:
module.exports = {
module: {
loaders: [
// This applies the loader to all of your dependencies,
// and not any of the source files in your project:
{
test: /node_modules/,
loader: 'ify-loader'
}
]
}
}Note that you're also free to apply this loader to files in your own project. Include the following in your project's webpack.config.js:
module.exports = {
module: {
loaders: [
// support local package.json browserify config
{
test: /\.js$/,
loader: 'ify-loader',
enforce: 'post'
}
]
}
}Any browserify transforms you include in package.json will get picked up and applied this way:
{
"name": "my-project",
"dependencies": {
"glslify": "5.0.0",
"brfs": "1.4.2"
},
"browserify": {
"transform": [
"glslify",
"brfs"
]
}
}When given the choice, I lean more in favour of browserify for its simplicity and compatability with node.js — however from time to time I need to work on projects that use webpack. The thing I run into issues with most often when switching between the two is the difference in how webpack handles source transforms compared to browserify.
Webpack provides you with a "global" configuration where you specify how your project and its dependencies are transformed in a single place. Browserify, however, scopes transforms to the current package to avoid conflicts between different dependencies' sources using the browserify.transform property in package.json.
There are pros and cons to both approaches — Webpack gives you more control, at the expense of having to configure each transform used in your dependency tree. Unlike transform-loader, ify-loader will automatically determine which browserify transforms to apply to your dependencies for you the same way that browserify itself does, making the process a lot more bearable in complex projects!
MIT, see LICENSE.md for details.