How to use a Babel script's object inside a Javascript?

Question

I'm developing a ReactJS application using Babel/JSX syntax. I want to write an module made of React's components. But I cannot use objects of a babel script inside a Javascript the same way I could use objects of a Javascript inside another Javascript.

Html:

<script src="/js/react_babel_jsx.js" type="text/babel" ></script> 
<script src="/js/my_javascript.js"></script>

/js/react_babel_jsx.js:

var Test = function(){

    this.hello = function () {
         console.log('Hello!')
    }
}

/js/my_javascript.js

new Test().hello()

Console output in Chrome:

   my_javascript.js:3 Uncaught ReferenceError: Test is not defined

How could I use Babel script's objects inside a Javascript?

azium · Accepted Answer · 2016-05-01 16:58:16Z

2

Variables defined in the Babel script are wrapped in their own closure space. It's the same as this:

function BabelStuff () {
  var Test = function () {}
}

function OtherStuff () {
  var x = new Test() // Test not defined!
}

If you're just wanting to get past this problem right now you can add things to the window namespace.

window.Test = function(){
    this.hello = function () {
         console.log('Hello!')
    }
}

But this should only be for testing, not production applications. When you're ready to move on you'll want to transpile your code ahead of time. Here's a common boilerplate that can get you started https://github.com/gaearon/react-hot-boilerplate

answered May 1, 2016 at 16:58

azium

20.7k8 gold badges63 silver badges81 bronze badges

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

Collectives™ on Stack Overflow

How to use a Babel script's object inside a Javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related