browserify/ify-loader

Name: ify-loader

Owner: browserify

Description: Webpack loader to handle browserify transforms as intended.

Created: 2016-01-02 09:48:51.0

Updated: 2017-12-02 15:46:53.0

Pushed: 2017-09-18 14:07:35.0

Homepage:

Size: 17

Language: JavaScript

GitHub Committers

UserMost Recent Commit# Commits

Other Committers

UserEmailMost Recent Commit# Commits

README

ify-loader

experimental

Webpack loader to handle browserify transforms as intended.

Usage

Install the loader using npm:

install --save ify-loader

You can then update your webpack.config.js in a similar fashion to the following to add browserify transform support to your project's dependencies:

le.exports = {
dule: {
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'
  }
]


Using transforms in your project

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:

le.exports = {
dule: {
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:


ame": "my-project",
ependencies": {
"glslify": "5.0.0",
"brfs": "1.4.2"

rowserify": {
"transform": [
  "glslify",
  "brfs"
]


Why?

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!

See Also
License

MIT, see LICENSE.md for details.


This work is supported by the National Institutes of Health's National Center for Advancing Translational Sciences, Grant Number U24TR002306. This work is solely the responsibility of the creators and does not necessarily represent the official views of the National Institutes of Health.