スクリプトタグtext/babel変数スコープ

Question

最初に、私はtext/babelが本番用ではないことを理解していますが、私が.jsxファイルに変更を加えたときに開発にとって非常に有用だとわかりました。djangoのdevウェブサーバーは、何か（JSXをJSにコンパイルするたびにコンパイルします）。

ビルド環境（例えば、django）は私が開発していない大規模なシステム用の小さなプラグインであるため、私はビルド環境を管理していません。

問題はこれです：

mythingは main.jsx、のような単純なものである

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

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

：main.jsxはjavascriptのである（とスクリプトタグの種類はそれに応じて変更された）場合

var mything = "hello"; 

これはうまくいくでしょう。しかし、mythingは範囲外であるため、text/babelとして機能しません。

Uncaught ReferenceError: mything is not defined 

私はスコープを共有するために、異なる種類のスクリプトタグを期待していないので、これは私には理にかなっているが、開発を支援するために、この周りにいくつかの巧妙な方法がある場合、私は思ったんだけど？

私はこれまですべてのコードを単一のtext/babelブロックに入れましたが、それが成長するにつれて、いくつかのJSXファイルに分割するのが良いでしょう。あまりにも深くバベルソース（https://github.com/babel/babel/blob/master/packages/babel/src/api/browser.jsを見て）に飛び込むなし

Answer 1

は、私はそれは、あなたのJSXソースを読み込み、ソースに変換を実行し、何らかの方法でevalのソースは、それを実行することを推測するつもりです。バベルは変換されたコードに'use strict';を付加するため、スコープは共有されません（ES6では標準）。あなたが本当に変数を公開する必要がある場合は

、あなたは（つまり、単にmythingするのではなく、あなたのJSXでwindow.mythingを使用）windowに添付することができます。理想的には、コードを複数のファイルに分割してモジュールを使用する必要があります。ビルドステップを使用してBabelからコードを変換し、browserify/webpackを使用して依存関係を管理することができます。