Browserify standalone react components

161 Views Asked by At

How can I use the standalone option in Browserify to export React components ? Basically Im trying to create a bundle JS with all the common React components that I have so that I can share it across multiple projects.

The following is a typical React component that I have,

var Layout = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },
    render: function() {
        return (
            <div id="parent">
                <Header {...this.props}/>
                <Sidebar {...this.props}/>
                <div id="main-content">
                    <div className="uk-width-1-1">
                        {this.props.children}
                    </div>
                </div>
                <Footer {...this.props}/>
            </div>
        );
    }
});

export default Layout;

I use Browserify within standalone option like so,

gulp.task('js-compile', 'Compile JS', ['common-clean'], function() {
    return browserify(paths.scripts.entry, {
            debug: isVerbose,
            standalone: 'SharedComponents'
        })
        .transform(babelify, {
            presets: ['react', 'es2015', 'stage-0']
        })
        //.external(['react', 'jquery'])
        .bundle()
        .pipe(sourceStream('shared_components.js'))
        .pipe(buffer())
        .pipe($.sourcemaps.init({
            loadMaps: true
        }))
        .pipe($.sourcemaps.write('./'))
        .pipe(gulp.dest(paths.dist.scripts.dir));
});

In the parent project I use it with the following,

import { Layout } from '../shared_components';

const AppRouter = () => {
    return (
        <Route path='/' component={Layout}>
            <IndexRoute component={TestPage}/>
        </Route>
    );
};

export default AppRouter;

And in this project I shim shared_components as I want to include it as <script></script> which will eventually come from a CDN.

"browserify-shim": {
    "../shared_components": "global:SharedComponents"
}

Unfortunately, the end result is this component is neither loaded nor throws any errors. Is this the right way to do this ?

0

There are 0 best solutions below