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

script tag text/babel variable scope

提问by dpwrussell

Firstly, I understand text/babelis not for use in production, but I found it quite useful for development as when I make a change to my .jsxfile django's dev webserver will reload without me having to do anything (i.e. compile the JSX to JS after every change).

首先，我知道text/babel它不适用于生产，但我发现它对开发非常有用，因为当我对.jsx文件进行更改时，django 的开发网络服务器将重新加载而无需我做任何事情（即在每次更改后将 JSX 编译为 JS） .

I am not in control of the build environment (e.g. django) as this is a small plugin for a larger system that I am not developing.

我无法控制构建环境（例如 django），因为这是一个用于我未开发的较大系统的小插件。

The problem is this:

问题是这样的：

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

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

Where mythingis in main.jsx, something as simple as:

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

var mything = "hello";

If main.jsxis javascript (and the type of the script tags is changed accordingly) then this will work just fine. As text/babelthough, it will not work because mythingis not in scope.

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

Uncaught ReferenceError: mything is not defined

This makes sense to me as I wouldn't expect script tags of different types to share a scope, but I'm wondering if there is some clever way around this to aid development?

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

I previously had all the code in a single text/babelblock, but as it grows, it would be nice to separate it out into several JSX files.

我以前将所有代码放在一个text/babel块中，但随着它的增长，最好将其分成几个 JSX 文件。

采纳答案by compid

Without diving too deeply into the Babel source (looking at https://github.com/babel/babel/blob/master/packages/babel/src/api/browser.js), I'm going to guess that it reads your JSX source, performs transformation on the source, and then evals the source in some way to execute it. The scope is not shared because babel prepends 'use strict';to the transformed code (standard in ES6).

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

If you really need to expose a variable, you can attach it to window(ie use window.mythingin your JSX instead of just mything). Ideally, you should make use of modules as you split your code up into multiple files. You can make use of a build step to transform your code through Babel and use browserify/webpack to manage dependencies.

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