如何在 Javascript 中使用 Babel 脚本的对象？

Question

我正在使用 Babel/JSX 语法开发 ReactJS 应用程序。我想编写一个由 React 组件组成的模块。但是我不能像在另一个 Javascript 中使用 Javascript 的对象那样在 Javascript 中使用 babel 脚本的对象。

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()

Chrome 中的控制台输出：

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

如何在 Javascript 中使用 Babel 脚本的对象？

Answer 1

Babel 脚本中定义的变量被包装在它们自己的闭包中 space。与此相同：

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

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

如果您现在只想解决这个问题，您可以将内容添加到 window 名称space。

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

但这应该只用于测试，而不是生产应用程序。当您准备好继续前进时，您会希望提前转换您的代码。这是一个可以帮助您入门的通用样板 https://github.com/gaearon/react-hot-boilerplate