javascript - 脚本标签文本/babel 变量范围

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 block 中，但随着它的增长，最好将它分成几个 JSX 文件。

Answer 1

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

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