javascript – 脚本标记文本/ babel变量范围

首先,我理解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>

我的东西在main.jsx中,简单如下：

var mything = "hello";

如果main.jsx是javascript(并且相应地更改了脚本标签的类型),那么这将正常工作.作为文本/巴贝尔,它不会起作用,因为我的东西不在范围内.

Uncaught ReferenceError: mything is not defined

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

我之前将所有代码都放在一个text / babel块中,但随着它的增长,将它分成几个JSX文件会很不错.

解决方法:

如果不深入Babel源(看https://github.com/babel/babel/blob/master/packages/babel/src/api/browser.js),我会猜测它会读取你的JSX源代码,对源代码执行转换,然后以某种方式篡改源代码来执行它.范围不共享,因为babel prepend’use strict’;转换后的代码(ES6中的标准).

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

标签：javascript,babeljs
来源： https://codeday.me/bug/20191006/1860356.html