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 ?