react js with browserify

Question

I start to learn react js and they say on the react website "We recommend using React with a CommonJS module system like browserify"

So I used browserify with a simple hello world react component. Finally it produces an output file bundle.js of 651 ko (just for a simple hello world). With this file bundle.js, I no longer have to include the scripts react.js and react-dom.js in my webpage, so I concluded that the file bundle.js includes my component and the react library.

But if I creates many components, I will have some javascript files and after the browserify transformation, ~~each output files will be big because each files contains the react library.~~ it will produce only one output file.

So I don't understand why they recommend to use browserify rather than just include react.js and react-dom.js library into my webpage and also my components js files after a babel transformation?

Your question is based on a false premise. If you create many components, and you run them all through browserify, then you should have a single JS file output. — Quentin
– Quentin, Commented Nov 11, 2015 at 16:17
hum ok so it produces one output file for multple input files, why don't they recommand to also minify the produced output file ? I am wonderng when you have many many components, it will be a lost of time to run the browserify command after each modification of your codes, it is possible to run the task automatically with a task runner or somethng like this ? — Olivier Boissé
– Olivier Boissé, Commented Nov 11, 2015 at 16:21

J. Mark Stevens · Accepted Answer · 2015-11-11 16:33:28Z

1

For development it is better not to minify. You apply minify when you go to production. For example with gulp;

gulp.task('appjs', function(){
	browserify({ debug: true })
		.transform(babel.configure({stage: 0}))
		.require(source.appjs, { entry: true })
		.bundle()
		.pipe(vsource('app.min.js'))
		.pipe(gulp.dest('./ui-dist'));
});

gulp.task('buildapp', function(){
	browserify({ debug: false })
		.transform(babel)
		.require(source.appjs, { entry: true })
		.bundle()
		.pipe(vsource('app.min.js'))
		.pipe(vbuffer())
		.pipe(uglify())
		.pipe(gulp.dest('./ui-dist'));
});

answered Nov 11, 2015 at 16:33

J. Mark Stevens

4,9452 gold badges15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mostafa EL BARRAK · Accepted Answer · 2015-11-11 22:28:45Z

1

I think your question is about the size of the bundle file (the resulted file of browserify build), you worry about the time it will take when loaded on the page. This is some really important things you should know : 1. you don't have to include all your files in one bundle : you can generate multiple bundles. For example, you can configure browserify to create one bundle for your vendor files, and one or multiple bundles for your components.

in Dev mode, you don't have to minify your bundle,
For prod, you should generate your bundle using the react prod mode and minification.

To achieve point 1 (multiple bundles), here is an example with grunt browserify plugin.

var jsFiles = {
        jsSrcFiles: './src/main/js/vs/**/*.js*', // my js and jsx source files
        jsLibs: [
            // vendor libs that I want to put in separate bundle
            'react/addons',
            ...
        ]
    };
    ...
    browserify: {
            app: {
                options: {
                    transform: ['reactify'],
                    extensions: ['.jsx'],
                    // Here is where I tell browserify not to bundle vendor files with my source files
                    external: jsFiles.jsLibs

                },
                src: [jsFiles.jsSrcFiles],
                dest: buildParams.js + '/vs_app.js'
            },
            // here is where I build vendor files in separate bundle named vendor.js
            vendor: {
                src: ['.'],
                dest: buildParams.js + '/vendor.js',
                options: {
                    alias: jsFiles.jsLibs
                }
            }
        }...

Browserify is a great tool when it comes to small projects, when your project becomes more complex, browserify config tends to be very complex. In order to have more control of your built bundles, I recommend to use webpack, which is also a tool that facebook recommends. It allows easy bundling customization...

answered Nov 11, 2015 at 22:28

Mostafa EL BARRAK

1464 bronze badges

2 Comments

Olivier Boissé Over a year ago

thanks, just a stupid question, what are vendor files ?

Mostafa EL BARRAK Over a year ago

They are source files that you didn't write, libraries you use, react source file is an example

Collectives™ on Stack Overflow

react js with browserify

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related