script tag text/babel变量范围

Question

首先,我理解text/babel不是用于生产,但我发现它对于开发非常有用,因为当我对我的.jsx文件进行更改时,django的dev webserver将重新加载而不需要做任何事情(即在每次更改后将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预先修改'use strict';了转换后的代码(ES6中的标准).

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