脚本标签 text/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 块中，但随着它的增长，最好将它分成几个 JSX 文件。

Answer 1

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

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

脚本标签 text/babel 变量范围

script tag text/babel variable scope

javascript

babeljs