reactjs - Accessing a Browserify/Babel ES6 Module with ES5 Syntax -

context

i have es6/react-js file called externalcomponent.react.jsx, following structure:

    import react 'react'     import swipeable 'react-swipeable'      const externalcomponent = react.createclass({         //...     })      export default externalcomponent 

i have used browserify/babel compile file es5 version (the new es5 file called my-external-component-in-es5.js) using following command:

browserify -t babelify --presets react myexternalcomponent.react.jsx -o my-external-component-in-es5.js 

the output of file quite large (>20,000 lines of javascript); however, appears wrap externalcomponent in large iife (might wrong this).

problem

my goal access class externalcomponent pure es5 context (in development environment, unable use es6). i'm assuming going involve 1 of following:

1. within externalcomponent.react.jsx, somehow add externalcomponent global namespace, when compiles es5 can refer externalcomponent name.
2. somehow access externalcomponent class buried in massive my-external-component-in-es5.js using es5 syntax.

i'm not sure how either (1) or (2).

note: in case wondering why want this, it's because i'm trying use externalcomponent within clojurescript (which has es5 javascript interop; hence have figure out how access externalcomponent using only es5 syntax!).

when compile es6 module es5 browserify converts import syntax commonjs calls.

this:

import foo './foobar'; 

becomes:

var foo = require('./foobar'); 

you can access , use class expect es5 file, there's no need clobber global namespace. use commonjs functions.

var externalcomponent = require('./my-external-component-in-es5');  reactdom.render   <externalcomponent />,   document.getelementbyid('app') ); 

---

if you're trying clojurescript, suggest creating standalone browserify build exposes modules global variables. can use tool browserify-umdify.

// external-component.js export default externalcomponent 

this compiled javascript file exposes externalcomponent global variable on window object.

compile somewhere resources/public/js/compiled/bundled-deps.js, add index.html script tag (above cljs build).

then you'll able reference js modules through js namespace.

(def external-component js/externalcomponent)