Question

首先，我了解text/babel不适用于制作，但我发现它对开发非常有用，因为当我对.jsx文件进行更改时，django的开发者网络服务器将重新加载没有我必须做任何事情（即每次更改后将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

这对我来说很有意义，因为我不希望不同类型的脚本标签共享范围，但我想知道是否有一些聪明的方法可以帮助开发？

我以前在单个text/babel块中拥有所有代码，但随着它的增长，将它分成几个JSX文件会很不错。

Answer 1

如果不深入Babel源（看https://github.com/babel/babel/blob/master/packages/babel/src/api/browser.js），我会猜测它会读取你的JSX源，对源执行转换，然后eval是源码以某种方式执行它。范围未共享，因为babel会在转换后的代码（ES6中的标准）之前添加'use strict';。

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

script tag text / babel变量范围

1 个答案: