脚本标签文本/巴贝尔变量范围

首先，我明白text/babel是不是用于生产，但我发现它对开发非常有用，因为当我对我的.jsx文件进行更改时，django的开发web服务器将重新加载，而无需我做任何东西（即每次更改后将JSX编译为JS）。脚本标签文本/巴贝尔变量范围

我不是在控制构建环境（例如django），因为这是一个我没有开发的较大系统的小插件。

问题是这样的：

<script type="text/babel" src="{% static "myapp/js/main.jsx" %}"></script> 

<script> 
    $(function() { 
     console.log(mything); 
    } 
</script>

凡mything为main.jsx，就这么简单的东西：

var mything = "hello";

如果main.jsx是JavaScript的（和脚本标签的类型也相应改变）那么这将工作得很好。由于text/babel虽然，它不会工作，因为mything不在范围内。

Uncaught ReferenceError: mything is not defined

这对我来说很有意义，因为我不希望不同类型的共享范围的script标签，但我不知道是否有一些解决这个聪明的方式来帮助发展？

我以前在单个text/babel块中拥有所有代码，但随着它的增长，将其分离为多个JSX文件将会很好。

来源

2015-10-13 dpwrussell

为了完整。我最终删除了使用'text/babel'，而是用webpack构建了我的代码。 – dpwrussell

没有深入研究Babel源代码（查看https://github.com/babel/babel/blob/master/packages/babel/src/api/browser.js），我猜测它会读取您的JSX源代码，对源代码执行转换，然后以某种方式执行代码转换。范围不共享，因为babel会将'use strict';添加到转换后的代码中（ES6中的标准）。

如果您确实需要暴露一个变量，您可以将它附加到window（即在您的JSX中使用window.mything而不是在mything中）。理想情况下，您应该在将代码分成多个文件时使用模块。您可以利用构建步骤通过Babel转换代码，并使用browserify/webpack管理依赖关系。

来源

2015-10-13 18:19:48 compid

我基本上从来没有使用eval所以不知道如何“使用严格”影响它。那很有意思。其余的是 – dpwrussell

。是的，我了解模块，但这是一个简单的例子。我不能真正添加构建步骤，因为我不控制构建系统，我不想与那些没有我的本地构建设置的人员进行协作，因为他们在修改JavaScript时真正的来源是JSX。从长远来看，这并不是一个彻底的解决方案，所以这可能是我必须要解决的问题。 – dpwrussell

我明白了。在这种情况下，从JSX文件中非常小心地将对象添加到全局范围似乎是一个可行的解决方案。 – compid

脚本标签文本/巴贝尔变量范围

回答

相关问题