18

I'm using Browserify to bundle a ReactJS application.

All my components include a require("react") at the top. This causes Browserify to include the ReactJS source in my bundle. But I'd like to exclude it.

How do I do that? Is this the right thing to do?

Andre Pena
  • 56,650
  • 48
  • 196
  • 243

4 Answers4

49

@NickTomlin gave this answer, but then deleted it.

You can use external:

browserify --external react src.js > dest.js

An example using the api: 

var bundler = browserify('src.js');

bundler.external('react');
bundler.bundle();

This is a viable option. external requires another script to provide the module in a compatible way. You can produce such a script like this:

browserify -r react > react.js
env NODE_ENV=production browserify -r react | uglifyjs -m > react.min.js

And in HTML:

<script src="react.js"></script>
<script src="dest.js"></script>

dest.js is your code except react. react.js is just react and its dependencies.

Need more things external? Just add them in addition to react.

browserify -x react -x react-bootstrap src.js > dest.js
browserify -r react -r react-bootstrap > vendor.js

You could also do something like this in package.json

"browser": {"react": "./react-fake.js"}

// ./react-fake.js
try {
    module.exports = require('react');
} catch(e){
    module.exports = window.React;
}

And compile with -x react. This allows you to accept a -r react build, and fallback to a global React.

Brigand
  • 84,529
  • 20
  • 165
  • 173
  • I believe there is a typo in the middle code block. The output file name for the first browserify should be dest.js rather than vendor.js, otherwise the second browserify will overwrite the first. – Baz Dec 08 '16 at 14:04
  • 1
    The problem is, `browser` is just a transform, so it does not apply to your node_modules. So if you have any node_modules libraries that reference react then they will throw a "modules not found" error. – bendytree Nov 10 '17 at 19:22
6

Sounds like you want to use browserify-shim.

In your package.json

"browserify-shim": {
    "react": "global:React"
},
"browserify": {
    "transform": [ "browserify-shim" ]
},
"dependencies": {
    "browserify-shim": "~3.2.0"
}

(untested). This section has more information.

Andy Ray
  • 30,372
  • 14
  • 101
  • 138
  • See also: http://stackoverflow.com/questions/23125338/how-do-i-use-browserify-with-external-dependencies – Andre Pena Mar 29 '15 at 16:41
  • I am having lots of trouble with browserify-shim. I have a umd module that i'm trying to browserify, and its not changing the modules require('foo') calls to global['Foo'] even though my package.json specifies browserify-shim: { 'foo': 'global:Foo' }. Do i need to target that module somehow? like browserify-shim: { 'mod': { depends: "foo" }} – dmarr Aug 28 '16 at 17:40
2

I also wanted to do this, and found a possible solution.

From the browserify -h help:

--ignore, -i Replace a file with an empty stub. Files can be globs.

Just use the ignore feature.

browserify -i react -i react-dom ...

I also added react and react-dom as peer dependencies, cause in my case, the package can be imported in other packages builds.

Gianluca Casati
  • 3,303
  • 1
  • 32
  • 20
-2

You can also use the externals section in the webpack.config.js file. eg:-

externals: {
        // require('jquery') is loaded externally and avaliable as jQuery
        "jquery": "jQuery"
    }

See https://webpack.github.io/docs/library-and-externals.html

dmdaniel
  • 1