CODEWITHSUNDEEP
javascriptnode.jsnpmreactjsbrowserify
JackMahoney
JackMahoney

Reputation: 3433

Browserify including entire module when only some parts used (react-addons)

I'm using Browserify to bundle serverside react.js code for the client.

However, I have a bad feeling that using a module from within an npm package results in that entire package being bundled by Browserify.

Q: Does require('react-addons').LinkedStateMixin result in the entire react-addons package being bundled into my Browserified JS?

IE: does Browserify treat require('react-addons').LinkedStateMixin the same as require('react-addons')?

If so, is there any way around this? External tools, Browserify options etc.

Upvotes: 1

Views: 994

Answers (3)

Alex Chuev
Alex Chuev

Reputation: 713

In ReactJS 0.13.3 if you want to use e.g. CSSTransitionGroup you have to do the next:

var React = require('react/addons'),
    CSSTransitionGroup = React.addons.CSSTransitionGroup;

And all that has to be installed – npm install react.

Upvotes: 1

JackMahoney
JackMahoney

Reputation: 3433

@mantoni was helpful but as this is a react-addons specific question i will post my answer.

Don't use react-addons and react side by side. Instead, when requiring React use require('react/addons'). This calls a script at /addons/ that returns the full React with addons.

So for my example:

var React = require('react/addons');
var LinkedStateMixin = React.LinkedStateMixin;

//this works as normal!
React.createClass({});

Thanks guys!

Upvotes: 1

mantoni
mantoni

Reputation: 1622

Browserify does not have the ability to extract parts of the functionality from a module.

What you can do though, is require the desired module from within react-addons like this:

require('react-addons/lib/LinkedStateMixin')

This will only include the one module (and it's dependencies) in your bundle. However, you now depend on the internal structure of the module. If the LinkedStateMixin is renamed, you will have to change your require statement.

Upvotes: 2

Related Questions