How can I exclude code path when bundling with webpack/browserify?

Question

I have a library that can be used with both node.js and the browser. I am using CommonJS then publishing for the web version using webpack. My code looks like this:

// For browsers use XHR adapter if (typeof window !== 'undefined') {   // This adapter uses browser's XMLHttpRequest   require('./adapters/xhr'); } // For node use HTTP adapter else if (typeof process !== 'undefined') {   // This adapter uses node's `http`   require('./adapters/http'); } 

The problem I am encountering is that when I run webpack (browserify would do the same) the generated output includes http along with all it's dependencies. This results in a HUGE file which is not optimal for browser performance.

My question is how can I exclude the node code path when running a module bundler? I solved this temporarily by using webpack's externals and just returning undefined when including './adapters/http'. This doesn't solve the use case where other developers depend on my library using CommonJS. Their build will end up with the same problem unless they use similar exclude config.

I've looked at using envify, just wondering if there is another/better solution.

Thanks!

Answer 1

You may use IgnorePlugin for Webpack. If you are using a webpack.config.js file, use it like this:

var webpack = require('webpack')  var ignore = new webpack.IgnorePlugin(/^(canvas|mongoose|react)$/)  module.exports = {   //other options goes here   plugins: [ignore] } 

To push it further, you may use some flags like process.env.NODE_ENV to control the regex filter of IgnorePlugin