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

【问题标题】：How to use a Babel script's object inside a Javascript?如何在 Javascript 中使用 Babel 脚本的对象？
【发布时间】：2016-05-01 16:48:35
【问题描述】：

我正在使用 Babel/JSX 语法开发一个 ReactJS 应用程序。我想写一个由 React 的组件组成的模块。但是我不能在 Javascript 中使用 babel 脚本的对象，就像我可以在另一个 Javascript 中使用 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()

Chrome 中的控制台输出：

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

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

【问题讨论】：

【解决方案1】：

在 Babel 脚本中定义的变量被包裹在它们自己的闭包空间中。和这个是一样的：

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

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

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

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

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

【讨论】：